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 中引入一下
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 中添加引用
生产环境打包时，先执行npm run build:dll生成文件，然后再执行npm run build即可。
和 externals不同点是，有时项目会用到npm上没有的包，这种情景就可以用DLLPlugin单独打包成文件引用。
发表评论 (审核通过后显示评论)：