阅读 4401

vue-cli之webpack3构建全面提速优化

前言

伴随着vue的全球化,各种vue的组件框架越来越完善,从早期的element-ui到vux,iview等越来越多高质量的项目,使用vue进行前端构建已然是一件工程化,模块化,敏捷化的事情

在这其中,相信很多人都会选择官方的vue-cli初始化工程模板,然后通过引入第三方组件框架和工具的方式进行开发构建,我个人也十分推崇这种做法。但是vue-cli初始化的项目模板毕竟是面向所有开发者的,在兼容性方面会有一定妥协。相信很多人都已经搜索过各类的webpack构建优化文章,但是很多不是版本太老就是不严谨 本文希望能在耗时优化与构建性能提升之间做一个平衡,即花最少的时间,对官方模板做最少的修改下,赚取最大的构建性能提升

思路

早期版本的vue-cli和webpack2时代,网上流传以下优化配置,但其实新版本的vue-cli和webpack3已经不需要

  • 使用ParallelUglifyPlugin替换UglifyPlugin(新版本的UglifyPlugin已经支持且默认开启了多线程并行构建,所以此步骤没有必要)

  • 启用webpack3的Scope Hoisting(vue-cli新版本已经配置webapck3,且已经默认开启此配置)

  • 善用alias(新版本vue-cli已经进行此项工作)

  • 配置CommonsChunkPlugin提取公用代码(新版本vue-cli已经进行此项工作)

对于新版本的vue-cli和webpack3,以下简单配置优化后可提升最少2倍的构建速度

  1. 按需引用
  2. 启用happypack多核构建项目
  3. 修改source-map配置
  4. 启用DllPlugin和DllReferencePlugin预编译库文件

实践

1、按需引用

1.1 几乎所有的第三方组件框架都会提供组件的按需引用方式,以iview为例,通过借助插件babel-plugin-import可以实现按需加载组件,减少文件体积,只需要修改.babelrc文件

npm install babel-plugin-import --save-dev

// .babelrc
{
  "plugins": [["import", {
    "libraryName": "iview",
    "libraryDirectory": "src/components"
  }]]
}
复制代码

1.2 然后这样按需引入组件,就可以减小体积了

import { Button } from 'iview'
Vue.component('Table', Table)
复制代码

2、启用happypack多核构建项目

安装happypack后,修改/build/webpack.base.conf.js文件即可

npm install happypack --save-dev

// /build/webpack.base.conf.js
const HappyPack = require('happypack')
const os = require('os')
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length })
// 增加HappyPack插件
plugins: [
    new HappyPack({
      id: 'happy-babel-js',
      loaders: ['babel-loader?cacheDirectory=true'],
      threadPool: happyThreadPool,
    })
  ]
// 修改引入loader
{
    test: /\.js$/,
    // loader: 'babel-loader',
    loader: 'happypack/loader?id=happy-babel-js', // 增加新的HappyPack构建loader
    include: [resolve('src'), resolve('test')]
}
复制代码

3、修改source-map配置

3.1 首先修改/config/index.js文件

// /config/index.js
dev环境:devtool: 'eval'(最快速度)
prod环境:productionSourceMap: false(关闭source-map)
复制代码

3.2 然后修改/src/main.js文件,关闭生产环境的调试信息

// /src/main.js
const isDebug_mode = process.env.NODE_ENV !== 'production'
Vue.config.debug = isDebug_mode
Vue.config.devtools = isDebug_mode
Vue.config.productionTip = isDebug_mode
复制代码

4、启用DllPlugin和DllReferencePlugin预编译库文件

这是最复杂也是提升效果最明显的一步,原理是将第三方库文件单独编译打包一次,以后的构建都不需要再编译打包第三方库

4.1 增加build/webpack.dll.config.js文件,并在其中配置需要单独DLL化的模块

const path = require("path")
const webpack = require("webpack")

module.exports = {
  // 你想要打包的模块的数组
  entry: {
    vendor: ['vue/dist/vue.esm.js', 'axios', 'vue-router', 'iview']
  },
  output: {
    path: path.join(__dirname, '../static/js'), // 打包后文件输出的位置
    filename: '[name].dll.js',
    library: '[name]_library'
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, '.', '[name]-manifest.json'),
      name: '[name]_library',
      context: __dirname
    }),
    // 压缩打包的文件
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ]
}
复制代码

4.2 在build/webpack.dev.conf.jsbuild/webpack.prod.conf.js 增加如下插件

new webpack.DllReferencePlugin({
    context: __dirname,
    manifest: require('./vendor-manifest.json')
})
复制代码

4.3 在/package.json增加命令

"dll": "webpack --config ./build/webpack.dll.config.js"
复制代码

4.4 在/index.html增加DLL化JS引入(必须首先引入)

<script src="/static/js/vendor.dll.js"></script>
复制代码

4.5 执行构建

npm run dll(这一步会生成build/vendor-manifest.json和static/js/vendor.dll.js)
npm run dev 或 npm run build
复制代码

后记

以上四个大步骤完成后,我们就完成了对vue-cli模板工程构建优化提升,虽然看起来依然算不上简单,但是这已经是最最最简单的优化了,还有更多奇技淫巧没有展开,因为我觉得过多的优化配置意义不大,反而会给项目工程带来太多冗余和复杂化

以上的配置实际测试的构建效果是从原先的13秒减少到了6秒左右,热部署更是毫秒级的

最重要的是,最简单化的配置,在未来vue-cli和webpack升级新版本后,也可以很容易的重新配置进去使用,熟练配置一次后,重新再还原配置只需要5分钟左右想想花5分钟修改一下配置,就能换来每次构建2倍以上速度的提升,是不是会有点小激动呢:)

再多说些后话吧,其实webpack2至webpack3的升级,个人觉得蛮失望的,因为它还是没有从根本上解决其配置过于复杂的问题,作为目标是占领全世界所有web项目构建的产品,它应该更多地从易用性/人性化的角度去考虑 每一次看着webpack的工程里面的各种.babelrc,.postcssrc.js...还有各种的.conf文件,甚至还有各种的main,index,app文件,就忍不住想吐槽,究竟为什么前端的构建会发展成这样,一个好好的项目工程里,十几种配置文件,真的有必要吗?我原本以为webpack3会将这一切变得简单,然而它并没有,不过既然暂时没有办法去改变,那我们能做的就是,尽可能理解其中原理,尽自己最大的可能去简化/优化

后续...

这篇文章开始动笔的时候还是2017年的年末,关于【后记】中的思考和讨论,其实在2018年已经有了比较完美的解决方案,那就是 parcel ,虽然国内搜索关于它的资料还不多,但是从目前来看,这几乎是前端构建最完美和最终极的解决方案。针对webpack配置过于冗余复杂,且代码侵入强的问题,parcel采用的是完全零配置的构建方案。虽然我个人并非专职于前端工作,但是前端也是我很大的兴趣爱好之一,对于前端最前沿的成果一定是要去尝试的 对于parcel的尝试,让我深陷其中,以至于到目前为止,我已经将我个人所有的前端项目无论大小,全部切换成parcel构建,而彻底放弃webpack。目前我将parcel和vue结合的模板工程项目开源 Parcel-VUE Github & Parcel-VUE官网,希望能借此帮助到更多被webpack困扰或者是被复杂的构建阻挠在前端学习之门外的读者们

感谢你的阅读,希望本文能够给你带来帮助:)

作者:CheneyXu 关于:XServer官网

文章分类
前端