使用webpack的DllPlugin方法优化vue项目的打包速度

本项目是用vue-cli脚手架搭建的，
webpack的版本是3.12.0 ；
vue-cli的版本是2.96；

第一步：在根目录的build文件夹新建一个 webpack.dll.conf.js 文件，代码如下：

var path = require('path')
var webpack = require('webpack')

var context = path.join(__dirname, '..')

module.exports = {
    entry: {
        vendor: [ //这里是要提取的资源文件，因为这些是不会改动的代码
            'vue/dist/vue.esm.js',
            'vuex',
            'vue-router',
            'axios',
            'element-ui'
        ]
    },
    output: {
        path: path.join(context, 'static/js'), // 打包后的 vendor.js放入 static/js 路径下
        filename: '[name].dll.js',
        library: '[name]',
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    },
    plugins: [
        new webpack.DllPlugin({
            path: path.join(context, '[name].manifest.json'),
            name: '[name]',
            context: context
        }),
        // 压缩js代码
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            },
            output: { // 删除打包后的注释
                comments: false
            }
        })
    ]
}

接着第二步：在package.json文件里面添加一个配置

//在scripts中多加一个dll的配置，
"scripts": {
        "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
        "start": "npm run dev",
        "build": "node build/build.js",
        "dll": "webpack --config build/webpack.dll.conf.js --progress"
    },
//添加完成后执行 npm run dll 命令,命令执行成功后:
//会在根目录的static/js文件夹下面生成一个vendor.dll.js的文件，
//同时还会在根目录下生成一个vendor.mainfest.json的文件

接着第三步：在index.html里面引入刚刚生成的这个verdor.dll.js文件：

接着是第四步：在build文件夹下的webpack.base.conf.js添加几行代码：

//先在文件的头部 引入一下webpack
const webpack = require('webpack');
//然后在插件配置plugins里面多加一个 webpcak.DLLReferencePlugin
plugins: [
     new webpack.DllReferencePlugin({
         // name参数和dllplugin里面name一致，可以不传
         name: 'vendor',
         // dllplugin 打包输出的manifest.json
         manifest: require('../vendor.manifest.json'),
         // 和dllplugin里面的context一致
         context: path.join(__dirname, '..')
     })
 ],

接着是第五步：在build文件夹下的webpack.prod.conf.js 修改几行代码：

//主要是把CommonsChunkPlugin相关的代码注释掉

//使用了dll后 不需要在编译了,因为在vendor.dll.js中编译好了
// new webpack.optimize.CommonsChunkPlugin({ 
//     name: 'vendor',
//     minChunks(module) {
//         // any required modules inside node_modules are extracted to vendor
//         return (
//             module.resource &&
//             /\.js$/.test(module.resource) &&
//             module.resource.indexOf(
//                 path.join(__dirname, '../node_modules')
//             ) === 0
//         )
//     }
// }),
//使用了dll后 不需要在编译了，因为在vendor.dll.js中编译好了
// new webpack.optimize.CommonsChunkPlugin({ 
//   name: 'manifest',
//   minChunks: Infinity
// }),

以上五个步骤步完成后，就可以在 终端 执行 npm run build 命令 打包文件了，可以看到速度比较之前 快了一些。注意：第五步一定要做，否则打包好的文件在服务器上运行会报加载错误！