10天前,nuxt.js 2.0.0 发布了,两天前,我决定将 也贝 项目的nuxt.js升级到最新,而就在10小时前,nuxt.js 2.1.0 发布了,nuxt.js 2.0.0 引入了wepack4,build 速度从1分钟降低到30秒,如果启用cache和并行编译,速度还可以提升,目前,我的项目 build 速度第一次稍慢,30秒 左右吧,之后很快,20秒不到。但是要升级到 nuxt.js 2.0.0 还是有不少坑的。
在我升级的过程中,我遇到的问题基本都和 webpack4.0 有关,具体有:
1、依赖需要更新:
"babel-plugin-transform-object-rest-spread": "^6.26.0", "babel-preset-es2015": "^6.24.1", "babel-preset-stage-2": "^6.24.1", "cross-env": "^5.2.0",
需要修改为:
"@babel/plugin-proposal-object-rest-spread": "^7.0.0",
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
"@babel/plugin-transform-runtime": "^7.1.0",
"@babel/preset-env": "^7.1.0",
2、移除以前的配置,移除 build -> babel 这部分应该能默认配置好,不需要自己指定
build: { babel: { presets: ['es2015', 'stage-2'], plugins: ["transform-vue-jsx", "transform-runtime", "transform-object-rest-spread"], } }
3、开启并行编译以及编译缓存,解决 webpack 92% chunk asset optimization UglifyJSPlugin
build: { // cache: true, parallel: true, optimization: { minimizer: [ new UglifyJsPlugin({ parallel: true, cache: true, }) ] },
这里,build -> cache 不要设置为 true ,反正我设置为 true 后本地图片加载不正常,字体也是,parallel 是指是否启用并行编译,默认是 false,我设置为 true,效果并不明显,但是后面插件里的 并行编译和缓存效果明显,能解决 chunk asset optimization (92%) UglifyJsPlugin ,当然,直接这么写是不行的,变量未定义,你需要先:
npm install --save-dev uglifyjs-webpack-plugin
然后在 nuxt.config.js 的顶部添加 const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
我切换到 nuxt.js 2.1.0 之后除了 webpack 的变化,其他都兼容,第一次编译花费 36 秒,以前是 58秒左右,第二次只需要20秒,第二次由于配置了 cache 所以略快。