nuxt.js 2.0.0 升级指南 – how to upgrade to nuxt.js 2.0.0

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、依赖需要更新：

1. "babel-plugin-transform-object-rest-spread": "^6.26.0",
2. "babel-preset-es2015": "^6.24.1",
3. "babel-preset-stage-2": "^6.24.1",
4. "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 这部分应该能默认配置好，不需要自己指定

1. build: {
2. babel: {
3. presets: ['es2015', 'stage-2'],
4. plugins: ["transform-vue-jsx", "transform-runtime", "transform-object-rest-spread"],
5. }
6. }

3、开启并行编译以及编译缓存，解决 webpack 92% chunk asset optimization UglifyJSPlugin

1. build: {
2. // cache: true,
3. parallel: true,
4. optimization: {
5. minimizer: [
6. new UglifyJsPlugin({
7. parallel: true,
8. cache: true,
9. })
10. ]
11. },

这里，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 所以略快。