nuxt.js 2.0.0 upgrade tutorial - 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、依赖需要更新:

"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 所以略快。

本博客若无特殊说明则由 full-stack-trip 原创发布
转载请点名出处:全栈之旅 > nuxt.js 2.0.0 upgrade tutorial - how to upgrade to nuxt.js 2.0.0
本文地址:https://www.kpromise.top/upgrade-to-nuxt-js-2-0-0/

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注