forked from sunseekers/Vue2
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
95a7964
commit 5a9efd3
Showing
2 changed files
with
266 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,192 @@ | ||
|
|
||
| `vue cli 3x` 发布已经有好长一段时间了，`webpack 4x` 现在版本已经到了 4.28.0；如果你现在用或者不用手脚架搭建项目，我都推荐你使用 `webpack 4x`，体验一把新技术带来的变化。我们可以用稳定版本的，稳定版本一般是没有问题，如果有问题，恭喜你，你推动了社区的发展。我们在一个好时代有问题可以作者提 `issue` 或者 `pull requests` | ||
|
|
||
| 我也体验一把 `vue cli 3x` 手脚架构建项目，拿公司的一个移动端小项目试验了一把。结果有点让我有点吃惊。公司项目使用的是 `npm` 命令，我 `vue cli 3x` 构建用的是 `yarn`，这个应该不影响。还有一点点区别是公司项目没有用 `CDN` ，我在构建的时候顺便项目优化了一下使用了这个 `CDN`（ `"vue-router": "VueRouter","element-ui": "ELEMENT",'v-charts':'VCharts','echarts': 'echarts'`），其他地方就没有区别了。但是总的来说肯定是 `webpack 4x` 比之前更好，要不然他版本升级意义在哪呢？ | ||
|
|
||
| `vue cli 2x` 和 `vue cli 3x` 项目结构差别：少了`build` 和 `config` 文件。如果我们需要另外配置环境直接写`.env.XXX`，修改配置文件直接新建`vue.config.js` 在里面配置。打包的时候直接传入 `--mode XXX` 就打包了不同的环境了。我更喜欢新版本，看上去简洁 | ||
| 注： | ||
|
|
||
| `h5-web-app` 是 `vue cli 2x` 构建的 `"webpack": "^3.6.0"` | ||
|
|
||
| `mobile` 是 `vue cli 3x` 构建的 `"version": "4.26.1"` | ||
|
|
||
|
|
||
|  | ||
|
|
||
|  | ||
| 整体看上去没有那么笨重，很多事情 `vue` 都帮我们做了 | ||
|
|
||
| `vue.config.js` 文件大致内容 | ||
|
|
||
|  | ||
|
|
||
| `build` 项目第一次 | ||
|
|
||
|
|
||
|  | ||
|
|
||
| `build` 项目第二次 | ||
|
|
||
|
|
||
|  | ||
|
|
||
| 打包后占用内存 | ||
|
|
||
|  | ||
|
|
||
| 本地启动项目（前后两次） | ||
|
|
||
|
|
||
|  | ||
|
|
||
| 首页加载时间 | ||
|
|
||
| `vue cli 3x` | ||
|
|
||
|  | ||
|
|
||
|  | ||
|
|
||
| `vue cli 2x` | ||
|
|
||
|  | ||
|
|
||
|  | ||
|
|
||
| 一顿折腾，前后对比还是能看到具体的数据差别的。我是初学者，如有什么地方不对，请指出，愿意学习改进。目前我司线上是没有优化的。 | ||
|
|
||
| 我个人认为 `webpack` 构建速度还是蛮重要的，深刻体会。实在是受不了每次编译所要等待时间，自己动手尝试了一下，新版本给我带来的感受。网传 | ||
|  | ||
| 夸张不夸张我不知道，但是自身体验有明显感觉到。 | ||
|
|
||
| 附上一份自己整理的 `webpack 4x` 的配置和 `vue cli 3x` 的配置 | ||
|
|
||
| `vue.config.js` | ||
|
|
||
| ``` | ||
| const path = require('path') | ||
| //去console插件 | ||
| const UglifyJsPlugin = require('uglifyjs-webpack-plugin') | ||
| //gzip压缩插件 | ||
| const CompressionWebpackPlugin = require('compression-webpack-plugin') | ||
| function resolve(dir) { | ||
| return path.join(__dirname, dir) | ||
| } | ||
| module.exports = { | ||
| outputDir: process.env.outputDir, | ||
| devServer: { | ||
| proxy: { | ||
| '/api': { | ||
| target: 'http://192.168.0.001:8080', | ||
| ws: true, | ||
| changeOrigin: true, | ||
| pathRewrite: { | ||
| '^/api': '' | ||
| } | ||
| }, | ||
| '/gateApi': { | ||
| target: 'http://192.168.0.002:8080', | ||
| changeOrigin: true, | ||
| pathRewrite: { | ||
| '^/api': '' | ||
| } | ||
| }, | ||
| '/xsApi': { | ||
| target: 'http://192.168.0.003:8080', | ||
| changeOrigin: true, | ||
| pathRewrite: { | ||
| '^/xsApi': '' | ||
| } | ||
| } | ||
| } | ||
| }, | ||
| configureWebpack: config => { | ||
| config.externals={ | ||
| vue: "Vue", | ||
| vuex: "Vuex", | ||
| "vue-router": "VueRouter", | ||
| "element-ui": "ELEMENT", | ||
| 'v-charts':'VCharts', | ||
| 'echarts': 'echarts', | ||
| } | ||
| let plugins = [ | ||
| new UglifyJsPlugin({ | ||
| uglifyOptions: { | ||
| compress: { | ||
| warnings: false, | ||
| drop_debugger: true, | ||
| drop_console: true, | ||
| }, | ||
| }, | ||
| sourceMap: false, | ||
| parallel: true, | ||
| }), | ||
| new CompressionWebpackPlugin({ | ||
| filename: '[path].gz[query]', | ||
| algorithm: 'gzip', | ||
| test: new RegExp( | ||
| '\\.(' + ['js', 'css'].join('|') + | ||
| ')$', | ||
| ), | ||
| threshold: 10240, | ||
| minRatio: 0.8, | ||
| }), | ||
| ] | ||
| if (process.env.NODE_ENV !== 'development') { | ||
| //在开发环境不压缩，有console日志 | ||
| config.plugins = [...config.plugins, ...plugins] | ||
| } | ||
| }, | ||
| lintOnSave: true, | ||
| chainWebpack: (config) => { | ||
| //配置别名 | ||
| config.resolve.alias | ||
| .set('@', resolve('src')) | ||
| .set('@assets', resolve('src/assets')) | ||
| .set('@constant', resolve('src/constants')) | ||
| .set('@components', resolve('src/components')) | ||
| .set('@base', resolve('src/base')) | ||
| .set('@api', resolve('src/api')) | ||
| .set('@common', resolve('src/common')) | ||
| .set('@utils', resolve('src/utils')) | ||
| .set('@router', resolve('src/router')) | ||
| .set('@store', resolve('src/store')) | ||
| .set('@mixin', resolve('src/mixin')) | ||
| .set('@img', resolve('public/img')) | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| 在我们实际的项目中，肯定是需要配置不同的环境的。在环境这一块我也是折腾了好长一段时间，求助各路朋友才弄明白了。菜鸡一个看不懂文档，也很无奈。记录这一路踩的坑 | ||
| 1. 多环境打包不同的文件 | ||
|
|
||
|  | ||
|
|
||
| `npm run build ` 会读取 `.env.production` 文件里面的配置的变量 | ||
| `npm run Devbuild ` 会读取 `.env.dev` 文件里面的配置的变量 | ||
|
|
||
| 注意了:只有以`VUE_APP_ `开头的变量会被 `webpack.DefinePlugin` 静态嵌入到客户端侧的包中。我在这个问题上卡壳一个上午，因为没有加`VUE_APP_ `，总是获取不到不同环境的不同变量 | ||
|
|
||
| 2.`pm2` 启动项目（记录给自己看） | ||
| 我只试过`pm2` 启动，其他的没有试，也就不懂。`pm2` 启动项目使用`http proxy` 做代理，所以也需要环境，这时候我们就可以直接用`vue.config.js`里面的就好了（好像说不清，来张截图吧） | ||
|
|
||
|  | ||
|
|
||
| 好像是说完了，最后说说这次折腾的感受吧，项目体验就不说了。这次明白了几个小小的知识点 | ||
|
|
||
| 1.`mac自带了python2.7` 打包之后进入打包文件 `dist` 可以用`python -m SimpleHTTPServer 80` 启动项目，和好像和 `pm2` 效果一样的， | ||
|
|
||
| 2.知道了一点点关于`SSR` 的知识点 | ||
| 是把这个工作放在服务器端做，直接在服务器端生成你想要的最终的页面，然后返回给浏览器，可以做`SEO`优化和首屏加载速度优化 | ||
|
|
||
| 3.怎么看错误日志，定位然后解决问题 | ||
|
|
||
| 4.`netstat -an | grep 8081` 和 `lsof -nP -i tcp | grep node` 这两个命令应该是看端口号上面的吧 | ||
|
|
||
| #### 我是初学者，很多地方不懂，说的不对，请多多指导。让我长点知识 | ||
|
|
||
| -------------------------------------------------------------------------------- | ||
|
|
||
| 我领导给我补充了一个知识点：浏览器在请求文件或者接口的时候，不同的域名可以并发进行，解释了上面 `mobile` 项目请求的时候为什么同一时间可以加载多个文件，这可能也是优化首页加载速度的知识点。 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| 但行好事，莫问前程 | ||
|
|
||
| 上次体验 `vue cli 3.0` 手脚架已是半年前了，是拿公司的小项目，小试牛刀，效果体验还不错。半年后鼓起勇气去推动公司核心项目，领导说个子小，胆子不小嘛。搞技术的就需要这一股劲，胆子大，是个干大事的人。我领导是个 `java` ，前端并不是他的拿手项目，我只能自己去啃，慢慢踩坑，慢慢成长。我也不知道为什么自己要去折腾捣鼓，但行好事，莫问前程 | ||
|
|
||
| 1.为什么要使用 `vue cli 3.0` 搭建项目？ | ||
|
|
||
| 答：为了更好的开发体验，提高开发效率，更好的了解项目。 | ||
| 之前写过一篇 [`体验 vue cli 3.0`](https://juejin.im/post/5c1b54515188250baa559cad) 的文章，比较了相关的性能，和配置文件， | ||
| 这里就不在重复，想了解更多戳链接。这里面想说说和之前不一样的地方，通过命令行切换不同的环境，哈哈 | ||
|
|
||
| 2.老项目是 `vue cli 2.0`， 如何转到 `vue cli 3.0` 有没有风险？ | ||
|
|
||
| 答：我只知道项目平行迁移，搭建一个项目，然后把代码搬过去。风险和机遇共存，鼓起勇气向推动公司核心项目发展，很慌也很害怕。但是短暂的害怕可以换取长期极致的技术体验，加深对项目了解 | ||
| ，在推动技术的同时成长自己。稳赚不赔的买卖。 | ||
|
|
||
| 3.有什么优缺点？ | ||
|
|
||
| 现状：我司有四个后端研发团队，每个后端团队的都在不同的环境下进行开发，测试还有测试环境。各种环境算下来差不多10来个，前端每一次在不同的环境下开发 | ||
| 都要去改配置文件。每次都是手动去改环境，很麻烦的。 | ||
|
|
||
| 之前的项目切换不同的环境，都是去 `index.js` 里面修改 | ||
|
|
||
|  | ||
|
|
||
| 解决方案：`vue cli 2.0` 的手脚架应该也是可以实现的，但是我没有去研究过。换了 `vue cli 3.0` 实现了不同的命令行运行不同的环境。再也不要手动去修改配置文件了。 | ||
|
|
||
|
|
||
|
|
||
|  | ||
|
|
||
|  | ||
| 读取环境变量，去设置不同的命令 | ||
|
|
||
|
|
||
|  | ||
|
|
||
|  | ||
|
|
||
| 我用的是 `webstorm` 借助工具设置运行命令，而不是手动去输入命令 | ||
|
|
||
|  | ||
|
|
||
|  | ||
|
|
||
| `vue cli 2.0` 项目大小和打包之后的大小 | ||
|
|
||
|  | ||
|
|
||
|  | ||
|
|
||
| `vue cli 3.0` 项目大小和打包之后的大小 | ||
|
|
||
|  | ||
|
|
||
|  | ||
| 关于运行速度，打包时间，我想留一点点悬念，自己去尝试，去体验。极致的开发体验投入到项目中去使用，去感受，我一股脑字都说完了，多没意思呀。 | ||
|
|
||
| 拿公司的小项目小试牛刀之后，鼓起勇气开动公司核心项目。再一次尝试，`get` 到的新技能。通过运行命令去切换不同的环境。而不是手动改。哈哈，开心 | ||
|
|
||
|
|
||
| 4.使用场景怎么样? | ||
|
|
||
| 公司启动新项目，公司老项目都可以，广泛使用哈哈。但是要注意的是，相关插件的升级和迁移。去遇见问题，去解决问题。多看文档，如果文档解决不了就去`issue` 上面看看， | ||
| 看看源码，多问多看，应该是可以解决的 | ||
|
|
||
|
|
||
| 硬着头皮啃了一遍又一遍的文档，踩了一万次坑。如果没有领导和对象的帮忙我想我应该放弃了这一次的推动项目升级，自己一个人挑起升级，自己一个啃文档，尝试过一次又一次的失败。 | ||
| 曾经有人和我说吃力不讨好何必呢？如果遇到问题或意外，前功尽弃了，我只想说：但行好事莫问前程。 | ||
|
|
||
| 请问有工作机会推荐吗？？base：上海 | ||
|
|
||
|
|
||
|
|
||
|
|