vue通过DllPlugin插件优化打包性能，减少打包时间（基于vue-cli）

step1：在build文件夹下新建 webpack.dll.conf.js 文件(即和webpack.base.conf.js同级)

const path = require('path')
const webpack = require('webpack');

module.exports = {

output: {
    filename: 'dll/[name].dll.js',
    path: path.resolve(__dirname, '../static/js/'),
    library: '[name]_library', // 当前Dll的所有内容都会存放在这个参数指定变量名的一个全局变量下，注意与DllPlugin的name参数保持一致
},
plugins: [
    new webpack.DllPlugin({
    path: path.resolve(__dirname, './manifest.json'), // 本Dll文件中各模块的索引，供DllReferencePlugin读取使用
    name: '[name]_library',
    }),
],
}

step2:在webpack.base.conf.js文件中配置

const webpack = require('webpack')

module.exports = {
    entry: {
        app: './src/main.js'
    },
   //.......
    plugins: [
        new webpack.DllReferencePlugin({
            context: path.resolve(__dirname, '..'),
            manifest: require('./manifest.json')
        })
    ],

}

step3:在package.json文件script中添加

"scripts": {
    "dll": "webpack -p --progress --config build/webpack.dll.conf.js",
},

step4:在index.html中引入 vendor.dll.js 文件

step5:在打包之前首先运行npm run dll  (只需运行一次即可，只要package.json中dependencies的依赖包(即通过import引入的依赖包)没有变化)

npm run dll（只运行一次即可）

npm run build（首次打包时间较长，后续打包时间明显减少）