内容简介:webpack版本:3.6.0五次打包所需时间:83.57s、78.71s、77.08s、78.07s、92.22s五次打包所需时间:71.44s、37.54s、30.05s、30.50s、32.68s.
- 升级后速度有明显的提升
- webpack升级优化参考文章: webpack4.0打包优化策略 、 让你的Webpack起飞—考拉会员后台Webpack优化实战
- 本文内容为升级优化过程中遇到的 Warning 、 Error 、及以上文章未讲到处
升级前
webpack版本:3.6.0
五次打包所需时间:83.57s、78.71s、77.08s、78.07s、92.22s
升级后
五次打包所需时间:71.44s、37.54s、30.05s、30.50s、32.68s.
开始升级
一. 升级webpack到4.x
同时还需升级:
$ yarn add webpack $ yarn add webpack-cli $ yarn add webpack-dev-server 复制代码
二.升级vue-loader
-
如果在
yarn dev/yarn build
时出现以下Error:Error: [vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options. 复制代码
解决方法:是vue版本与vue-template-compiler不一致。升级vue版本试试
-
将vue-loader引入webpack配置
// 文件: wepack.base.conf.js + const { VueLoaderPlugin } = require('vue-loader') + module.exports = { ...., plugins:[ new VueLoaderPlugin() ] } 复制代码
三.使用 mini-css-extract-plugin
来提取css
// 文件:wepack.prod.conf.js + const MiniCssExtractPlugin = require('mini-css-extract-plugin') + new MiniCssExtractPlugin({ filename: utils.assetsPath('css/[name].[contenthash:8].css'), chunkFilename: utils.assetsPath('css/[name].[contenthash:8].css') }) 复制代码
四.升级vue-router
由于 vue-loader@13.0.0 版本中对模块导入做了更新,为了支持 Webpack3 中的 Scope Hoisting 属性,esModule 被默认设置为了 true,如果你之前用到require来导入*.vue文件,请注意:
const Foo = require('./Foo.vue') // 需要改为 const Foo = require('./Foo.vue').default // 或者直接使用 const Foo = import('./Foo.vue') 复制代码
在低于 Vue 2.4 和 vue-router 2.7 的版本中,import 语法需要修改为:
const Foo = () => import('./Foo.vue') // 需要改为 const Foo = () => import('./Foo.vue').then(m => m.default) 复制代码
五.关于使用 import('./Foo.vue')
导入模块所面临的问题【参考】
- 由于webpack的import实现机制,会将其他的.vue文件打包,导致开发环境的热更新变的比较慢
-
所以要区分开发环境和生产环境。开发环境使用
require
,生产环境使用import
使用babel 的 plugins:babel-plugin-dynamic-import-node。它可以将所有的import()转化为require()。
// 首先先安装 yarn add cross-env babel-plugin-dynamic-import-node -D 复制代码
cross-env
包能够提供一个设置环境变量的scripts,能跨平台地设置及使用环境变量。
-
在
package.json
中增加BABEL_ENV
"dev": "cross-env BABEL_ENV=development webpack-dev-server --inline --progress --config build/webpack.dev.conf.js" 复制代码
-
在
.babelrc
文件中加入babel-plugin-dynamic-import-node
{ "env": { "development": { "plugins": ["dynamic-import-node"] } } } 复制代码
六.其他关于依赖升级后遇到的问题
由 autoprefixer
版本引起的warning
Module Warning (from ./node_modules/postcss-loader/lib/index.js): (Emitted value instead of an instance of Error) autoprefixer: /xxx/xxx.vue:187:6: Second Autoprefixer control comment was ignored. Autoprefixer applies control comment to whole block, not to next rules. 复制代码
解决方法:
// 将样式中像下面的写法 /* autoprefixer: off */ .... /* autoprefixer: on */ // 改为 /* autoprefixer: ignore next */ 复制代码
如果使用了 script-ext-html-webpack-plugin
,要注意与 html-webpack-plugin
的版本兼容
如果出现的异常如下:
(node:24424) UnhandledPromiseRejectionWarning: Error: Cyclic dependency (node:24424) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2) (node:24424) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code. 复制代码
这是循环依赖导致的。默认情况下 html-webpack-plugin
的配置项 chunksSortMode
的值是 auto
,需要改为 none
new HtmlWebpackPlugin({ filename: '', template: 'index.html', inject: true, favicon: resolve('favicon.ico'), title: '', path: '', minify: { ... }, chunksSortMode: 'none' } ) 复制代码
但是修改后会出现问题: chunksSortMode
决定你 chunks 的加载顺序,如果设置为none,你的 chunk 在页面中加载的顺序就不能够保证了,可能会出现样式被覆盖的情况。比如在app.css里面修改了一个第三方库element-ui的样式,通过加载顺序的先后来覆盖它,但由于设置为了none,打包出来的结果会变成下面这样:
<link href="/newapp/static/css/app.48599466.css" rel="stylesheet"> <link href="/newapp/static/css/chunk-elementUI.6a2cdc9f.css" rel="stylesheet"> <link href="/newapp/static/css/chunk-libs.dc4401e2.css" rel="stylesheet"> 复制代码
app.css
被先加载了,之前写的样式覆盖就失效了 。
解决方法: chunksSortMode
属性去掉,升级 html-webpack-plugin:"4.0.0-alpha"
和 script-ext-html-webpack-plugin:"2.0.1"
修改后如果出现以下异常:
/xxx/node_modules/script-ext-html-webpack-plugin/lib/plugin.js:50 compilation.hooks.htmlWebpackPluginAlterAssetTags.tap(PLUGIN, alterAssetTags); ^ TypeError: Cannot read property 'tap' of undefined 复制代码
- 修改"html-webpack-plugin": "^4.0.0-alpha" => "4.0.0-alpha"
- 删除 node_modules
- 删除 package-lock.json
- npm install/yarn
参考文章:【1】、 【2】
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
XML、JSON 在线转换
在线XML、JSON转换工具
RGB CMYK 转换工具
RGB CMYK 互转工具