结合vue-cli来谈webpack打包优化

随着web应用功能越来越复杂，模块打包后体积越来越大，这样会带来两个问题：

• 所有的js文件打包到一个bundle.js中导致首屏加载时间过长
• 有时我们只是修改了一个模块就得重新打包所用的文件 webpack天然支持多种模块系统风格，支持灵活的代码分割

1.2、按需加载的三种方式

webpack支持三种代码分割方式分别是：

• AMD: require(url, '别名')
• CommonJS: require.ensure([],func),
• ES6: import(url)

1.3、vue中如何按需加载

对应的vue中也有三种对应的解决方式：

• vue异步组件技术

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
    mode: 'history',
    routes: [
        {
            path: '/vue-async',
            name: 'vueAsync',
            component: resolve => require(['@/components/VueAsync'], resolve)
        }
    ]
})
复制代码

• webpack提供的require.ensure()

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

export default new Router({
    mode: 'history',
    routes: [
        {
            path: '/require-ensure'
            name: 'RequireEnsure',
            component: r => require.ensure([], () => r(require('@/components/RequireEnsure'), 'ensure'))
        }
    ]
})
复制代码

• 利用ES6提案的import()函数

import Vue from 'vue'
import Router from 'vue-router'

const EsImport = () => import('@/components/EsImport')
Vue.use(Router)
export default new Router({
    mode: 'history',
    routes: [
    {
        path: '/es-import',
        name: 'EsImport',
        component: EsImport
    }
]
})
复制代码

第三种方式比较简单，而且代码组织也比较明显，所以也更常被使用

二、合理使用commonsChunkPlugin

2.1、为什么使用commonsChunkPlugin

CommonsChunkPlugin 插件，是一个可选的用于建立一个独立文件(又称作 chunk)的功能，这个文件包括多个入口 chunk 的公共模块。简单来说CommonsChunkPlugin主要是用来提取第三方库和公共模块，避免首屏加载的bundle文件或者按需加载的bundle文件体积过大，从而导致加载时间过长，着实是优化的一把利器。

2.2、commonsPlugin的集中使用场景

• 提取两个及两个以上 Chunk 的公共代码
• 将 Code Split 切割出来的 Chunk「就是子 Chunk」，提取到父 Chunk
• 将 Code Split 切割出来的 Chunk，提取到一个新的异步加载的 Chunk
• 提取某个类似 jquery 或 react 的代码库「但是这个用得很少，使用用 dll 插件来打包会更好一些，一下篇介绍」

三、使用DllPlugin和DllReferencePlugin来提高打包速度

3.1、为什么使用DllPlugin和DllReferencePlugin

使用 CommonsChunkPlugin，设置 minChunks 为 Infinity 可用于打包此类代码，但缺点也是比较明显的：

• 每次执行 webpack 时，都会去解析打包这些代码，耗时也耗资源
• 如果设置了文件名 hash，一次构建生成一个新的hash，那这些文件即使没有变，文件名也会变，不利于缓存。 对于这些代码我是用 Dll 插件单独构建。

3.2、vue-cli中如何利用DllPlugin和DllReferencePlugin

• 在build目录下编写webpack.dll.conf.js

const path = require('path')
const webpack = require('webpack')
const AssetsPlugin = require('assets-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
  entry: {
    libs: [
      'vue/dist/vue.esm.js',
      'vue-router',
      'vuex',
      'element-ui'
    ]
  },
  output: {
    path: path.resolve(__dirname, '../static'),
    filename: '[name].[chunkhash:7].js',
    library: '[name]_library'
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.resolve(__dirname, '../static/[name]-manifest.json'),
      name: '[name]_library',
      context: __dirname
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    }),
    new AssetsPlugin({
      filename: 'bundle-config.json',
      path: './static'
    }),
    new CleanWebpackPlugin(['static'], {
      root: path.join(__dirname, '../'),
      verbose: true,
      dry: false
    })
  ]
}

复制代码

• 在build目录下编写buildDll.js

const path = require('path')
const webpack = require('webpack')
const webpackDll = require('./webpack.dll.conf')
const chalk = require('chalk')
const ora = require('ora')
const rm = require('rimraf')
const spinner = ora({
  color: 'green',
  text: 'Dll生产中'
})

spinner.start()

rm(path.resolve(__dirname, '../static'), err => {
  if(err) throw err
  webpack(webpackDll, (err, status) => {
    spinner.stop()
    if(err) throw err
    process.stdout.write(status.toString({
      colors: true,
      modules: false,
      children: false,
      chunks: false,
      chunkModules: false
    }) + '\n\n')
  })
  console.log(chalk.cyan('dll success'))
})

复制代码

• 修改webpack.base.conf.js

// 添加plugins
plugins: [
    new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require('../static/libs-manifest.json')
    })
  ]
复制代码

• 修改webpack.dev.conf.js

const bundleConfig = require("../static/bundle-config.json")//调入生成的的路径json
new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true,
      libJsName: bundleConfig.libs.js
}),
复制代码

• 修改webpack.prod.conf.js

const bundleConfig = require("../static/bundle-config.json")//调入生成的的路径json
 new HtmlWebpackPlugin({
      ...省略号...
      libJsName: bundleConfig.libs.js
      ...省略号...
    })
复制代码

• 修改index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue-multipage</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script src="./static/<%= htmlWebpackPlugin.options.libJsName %>"></script>
  </body>
</html>
复制代码

参考文章：

• 为什么要 Webpack
• webpack代码分割技巧
• vue-cli、webpack提取第三方库-----DllPlugin、DllReferencePlugin