This website requires JavaScript.

webpack4 升级不完全指南及实战经验

2019.09.16 03:23字数 3172阅读 1217喜欢 22评论 0

前言:使用webpack构建的项目配置相对繁琐,而且随着项目越来越大会发现打包速度越来越慢,我司前端使用vue的架构并且使用i18n打包成多语言发布,在这种情况下打包速度大几分钟,影响开发效率,6月份在小马哥的努力推动下,我们对现有vue项目升级了webpack4,线上稳定运行了将近两个月,今天提笔将升级的过程以及升级中遇到的坑,跟大家分享一下

一、升级前后对比

升级前

升级后

前后10倍的提升,话不多说,开始冒险吧

二、升级过程

  2.1 工具升级
    2.1.1 webpack版本升级到4.X,目前项目中是4.12.2,以及安装webpack-cli (webpack4 启动辅助)
    2.1.2 用到的loader跟plugin升级

老版本大部分不支持webpack4,具体版本可去npm自行查找

    2.1.3 webpcak4修改了插件内部的写法,webpack-dev-middlewarewebpack-hot-middleware 等插件同样需要升级版本
  2.2 配置升级
    2.2.1 mode 修改
只有本地开发是development,只要需要打包的环境都是production,全局变量自己单独再配置就好,这里production更多的作用是带来了很多默认优化配置
webpack.dev.conf.js

webpack.release.conf.js & webpack.prod.conf.js
    2.2.2 移除 CommonsChunkPlugin, 添加optimization配置

webpack 4 移除 CommonsChunkPlugin, 并默认启用了它的许多功能。webpack4可以实现很好的默认优化。同样对于需要自定义的缓存策略的配置,我们也可以使用optimization.splitChunksoptimization.runtimeChunk(添加optimization配置)

升级之前的抽离出的 vendormanifest 两个文件可以通过这两个配置生成
    2.2.3 配置 UglifyJsPlugin的功能
可以通过optimization.minimize= true来启用默认压缩策略,也可根据实际情况去自行配置,详细配置请关注 https://github.com/mishoo/UglifyJS2 (这里去掉了webpack-parallel-uglify-plugin 改用 uglifyjs-webpack-plugin)
    2.2.4 使用 mini-css-extract-plugin 抽离css
webpack4以后对 css 模块支持的逐步完善,建议使用 mini-css-extract-plugin 插件代替 extract-text-webpcak-plugin 插件
    2.2.5 插件的引用顺序
webpack4中对插件引用顺序有了严格的要求,例如:manifest内联设置顺序设置,使用 inline-manifest-webpack-plugin 是基于webpack-html-plugin的钩子的 所以在plugin执行顺序上,要保证提供钩子的插件提前调用
    2.2.6 自定义写法的修改
compiler.plugin ==> compiler.hooks 去绑定到自定义插件上
改之前

改之后

三、升级中遇到的坑及解决方式

  3.1 本次升级过程中遇到的最大的一个问题就是,构建过程中出现内存溢出


出现原因:上文已经提及我们的项目是多页面多语言的,是在构建过程中将一个页面通过 html-webpack-plugin 分别打包成不同的语言文件,html-webpack-plugin 每次实例化时都会创建 Compilation,在编译时会大量创建,影响性能,目前GitHub有commit解决此性能问题,在多个htmlwebpackplugin实例重用一个编译器Compiler,暂时官方版本还用不上
解决方案:先将此beta版本拿到本地使用,官方升级后在替换即可

  3.2 页面左右结构,样式定义宽度分别50%,会出现折行现象

出现原因: vue-loader升级后,压缩后的html,同级标签之间会增加一个空格!!!!

解决方案:vue-loader.conf.js 中增加 压缩配置

  3.3 postcss autoprefixer 在升级后不生效的问题

解决方案:安装 postcss-loader