webpack打包优化

此篇分享为 vue-cli2.0 中 webpack 的优化配置。

1、按需引入组件

例如引入 element-ui ，用到哪些组件就引哪些

import {Button,Dialog} from 'element-ui';
Vue.use(Button); // 按钮组件
Vue.use(Dialog); // 对话框组件

2、externals 属性

webpack的externals属性，将公共的或不常改动的第三方包名称，配置在属性中，打包时会自动忽略当中的包。具体实现如下：

在 build/webpack.base.conf.js文件中：

module.exports = {
    externals: {
        Vue: 'Vue',
        Axios: 'axios'
    }
}
// 其中的 key--对应 import Axios名称，value--对应原始方法名称

需要在根目录，index.html 中引入一下

<script src="https://unpkg.com/vue@2.6.11/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios@0.19.2/dist/axios.min.js"></script>

3、给定文件匹配范围

include 规定需要处理的文件有哪些

enclude 排除不需要处理的文件夹

{
    test: /\.js$/,
    loader: 'babel-loader',
    include: [resolve('src')],
    exclude: /node_modules/
}

4、noParse 属性

过滤掉不需要解析的文件

{
    module: {
        noParse: /jquery/,
        rule: [
            ...
        ]
    }
}

5、cacheDirectory 缓存属性

babel-loader提供了cacheDirectory选项参数，默认为false。

设置空或true时，会利用系统的临时文件夹缓存经过 babel 处理好的模块，对于 rebuild js 有着非常大的性能提升。

{
    test: /\.js$/,
    loader: 'babel-loader?cacheDirectory',
    include: [resolve('src')],
    exclude: /node_modules/
}

6、happyPack 多个子进程并行

webpack 在打包过程中，loader 转化js、css、img等文件是同步进行的，一个一个的转换。

happyPack 的原理是，将这些任务分解到多个子进程中，并行执行，执行完成后把结果发送到主进程，从而减少整体的打包时间。

第一步：安装

npm install happypack -D

第二步：引入和配置
修改 build/webpack.base.conf.js 文件的 module.rules 配置：

{
    test: /\.vue$/,
    loader: 'happypack/loader?id=happyVue'
},
{
    test: /\.js$/,
    loader: 'happypack/loader?id=happyBabel',
    include: [resolve('src')],
    exclude: /node_modules/
}

生产环境的话添加 build/webpack.prod.conf.js 文件配置：

const vueLoaderConfig = require('./vue-loader.conf')
const HappyPack = require('happypack')
const os = require('os')
// 创建共享进程池
const HappyPackThreadPool = HappyPack.ThreadPool({size:os.cpus().length})
plugins: [
    ...
    new HappyPack({
        id: 'happyVue', // 唯一的标识符id，来代表当前的HappyPack是用来处理一类特定的文件
        loaders: [{
            loader: 'vue-loader',
            options: vueLoaderConfig
        }],
        threadPoll: HappyPackThreadPool
    }),
    new HappyPack({
        id: 'happyBabel',
        loaders: ['babel-loader?cacheDirectory'],
        threadPoll: HappyPackThreadPool
    })
    ...
]

7、使用 DllPlugin 和 DllReferencePlugin

此方法是独立于 webpack 配置的。

1.在 build 下新建一个webpack.dll.conf.js文件内容如下：

const path = require('path')
const webpack = require('webpack')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
    entry: {
        vendor: ['vue', 'vue-router']
    },
    output: {
        path: path.resolve('./static'),
        filename: '[name].dll.js',
        library: '[name]'
    },
    plugins: [
        new webpack.DllPlugin({
            path: path.resolve('./static', '[name]-manifest.json'),
            name: '[name]'
        }),
        // 建议代码压缩，否则dll包会比较大。
        new UglifyJsPlugin()
    ]
}

文件会生成在 static 目录中。

2.在 build/webpack.prod.conf.js 的 plugin 加入如下配置：

new webpack.DllReferencePlugin({
    manifest: require('../static/vendor-manifest.json')
})

3.在 package.json 中添加快捷命令：

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

4.在根目录 index.html 中添加引用

<script type="text/javascript" src="./static/vendor.dll.js"></script>

生产环境打包时，先执行npm run build:dll生成文件，然后再执行npm run build即可。

和 externals不同点是，有时项目会用到npm上没有的包，这种情景就可以用DLLPlugin单独打包成文件引用。