一、前言
对于使用vue开发项目的FE来说,打包上线这个环节相信大家都不陌生。本文主要是介绍如何通过webpack(实践版本:webpack4.16.5)的配置来提高打包构建速度以及减小包的体积。
二、优化策略
css,js,html压缩
使用 optimize-css-assets-webpack-plugin 来压缩css。在webpack4的配置项中,需在optimization下的minimizer对象中去实例化使用。
// 压缩css
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
// 在optimization.minimizer中引用
new OptimizeCSSAssetsPlugin()复制代码
使用 MiniCssExtractPlugin来抽离内联css到外联文件 。
// 抽离内联css到外部css文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 在optimization.minimizer中引用
new MiniCssExtractPlugin({
filename: utils.assetsPath('css/[name].[contenthash:8].css'),
chunkFilename: utils.assetsPath('css/[name].[contenthash:8].css')
})复制代码
使用 uglifyjs-webpack-plugin 来压缩js,重点属性 parallel, 用来开启多进程并行执行js压缩,大大提高构建速度。
//压缩js
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
//在optimization.minimizer中引用
new UglifyJsPlugin({
uglifyOptions: {
warnings: false,
mangle: {
safari10: true
},
compress: {
drop_debugger: false,
drop_console: true, //console
pure_funcs: ['console.log'] // 移除console
},
output:{
// 去掉注释内容
comments: false
}
},
sourceMap: false,
cache: true,
parallel: true
})复制代码
使用 html-webpack-plugin来 压缩 html 代码,并实现自动化注入脚本以及样式文件,对于文件名中包含哈希的Webpack捆绑包尤其有用。
// 压缩html
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 在plugins中引入
new webpack.HtmlWebpackPlugin({ filename:path.resolve(__dirname, '../dist/index.html'),
template: 'index.html', inject: true,
favicon: resolve('favicon.ico'),
title:'标题',
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
} })
复制代码
拆包
webpack4.x中使用splitChunks来进行拆包,抽离第三方依赖库。默认情况下,webpack将会基于以下条件自动分割代码块:
新的代码块被共享或者来自node_modules文件夹
新的代码块大于30kb(在min+giz之前)
按需加载代码块的请求数量应该<=5
页面初始化时加载代码块的请求数量应该<=3
默认配置如下:
splitChunks: {
chunks: "async",
minSize: 30000, // 模块的最小体积
minChunks: 1, // 模块的最小被引用次数
maxAsyncRequests: 5, // 按需加载的最大并行请求数
maxInitialRequests: 3, // 一个入口最大并行请求数
automaticNameDelimiter: '~', // 文件名的连接符
name: true,
cacheGroups: { // 缓存组
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
}复制代码
可以通过自定义配置项修改配置,如像这样抽离第三方依赖库(如单独将elementUI打包)
splitChunks: {
chunks: 'all',
cacheGroups: {
lib: {
name: 'chunks-libs',
test: /[\\/]node_modules[\\/]/,
priority: 10,
chunks: 'initial' // 只打包初始时依赖的第三方
},
elementUI: {
name: 'chunk-elementUI', // 单独将 elementUI 拆包
priority: 20, // 权重要大于 libs 和 app 不然会被打包进 libs 或者 app
test: /[\\/]node_modules[\\/]element-ui[\\/]/,
chunks: 'all'
}
}
}复制代码
一般还需配合runtimeChunk使用( runtimeChunk的具体作用 )。在抽取 Webpack 运行时代码的时候,要指定 runtimeChunk 属性:
true
'single'
// optimization.runtimeChunk 具体使用规则 详见
//https://webpack.js.org/configuration/optimization/#optimizationruntimechunk
runtimeChunk: true复制代码
Happypack
由于 JavaScript 是单线程模型,在webpack构建过程中,我们需要使用Loader对js,css,图片,字体等文件做转换操作,并且转换的文件数据量也是非常大的,且这些转换操作不能并发处理文件,而是需要一个个文件进行处理,HappyPack的基本原理是将这部分任务分解到多个子进程中去并行处理,子进程处理完成后把结果发送到主进程中,从而减少总的构建时间。(ps:对file-loader和url-loader支持不好,所以这两个loader就不需要换成HappyPack)
Happypack运行机制
Happy使用方式
// 多进程并发执行loader 默认为单线程
const HappyPack = require('happypack')
const os = require('os')// 根据系统的内核数量 指定线程池个数 也可以其他数量
const happyThreadPool = HappyPack.ThreadPool({size: os.cpus().length})//插件中引入
plugins:[
new HappyPack({
// 基础参数设置
id: 'babel', // 上面loader?后面指定的id
loaders: ['babel-loader?cacheDirectory'], // 实际匹配处理的loader 这里加入了缓存控制
threadPool: happyThreadPool,
verbose: true
})
]
// loader处理器中使用 通过id匹配modules: {
test: /\.js$/,
use:'happypack/loader?id=babel',
exclude: /node_modules/, // 排除不处理的目录
include: [
resolve('src'), resolve('test'),
resolve('mock'),
resolve('node_modules/webpack-dev-server/client')
]
}复制代码
缓存与增量构建
缓存构建 :webpack构建中,一般需要使用许多loader来预处理文件,以babel-loader为例。可以通过设置 cacheDirectory 或 cacheDirectory=true 来达到缓存的目的。
{
test: /\.js$/,
loader: 'babel-loader?cacheDirectory',
exclude: /node_modules/, // 排除不处理的目录
include: [
resolve('src'),
resolve('test'),
resolve('mock'),
resolve('node_modules/webpack-dev-server/client')
]
}复制代码
cacheDirectory对loader转译后的结果进行缓存,之后的webpack进行构建时,都会去尝试读取缓存来避免高耗能的babel重新转译过程。
增量构建 :使用增量构建而不是全量构建有利于构建速度的提升。 全量构建 即每次重新构建都需要重新编译一次(包括未修改部分),而 增量构建 对于未修改的部分不会再重新编译,对于rebuild能够大大提高编译速度。对于开发阶段,可以使用 webpack-dev-server 来达到增量编译的目的,对于生产阶段,可以通过给生成的文件添加 hash (或 chunkhash 或 contenthash )来实现增量构建。
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash:8].js'),
chunkFilename: utils.assetsPath('js/[name].[chunkhash:8].js')
}复制代码
优化模块查找路径
通过配置resolve.modules来告诉webpack解析模块时应该搜索的目录。默认配置采用向上递归搜索的方式去寻找,设置特定搜索目录有助于webpack更快搜索到目标。
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'@': resolve('src')
},
modules: [
resolve('src'),
resolve('node_modules')
]}
}复制代码
DllPlugin和DllReferencePlugin
dll全称为动态链接库,先通过 dllPlugin 生成清单文件(这个文件包含了从 require 和 import 的request到模块 id 的映射),然后通过 DllReferencePlugin 引用该清单文件,将依赖的名称映射到模块的 id 上。这样每次打包时.先去查找清单里中是否已经存在这个依赖,如果已经存在,则不打包,如果还没存在,则需要打包。与通过 externals 的方式引入第三方库类似,dll主要用于那些没有可以在
使用方式
新建一个webpack.dll.conf.js文件,并执行 webpack --config ./build/webpack.dll.conf.js 会在static/js文件夹下生成 dll.vendor.js 以及在根目录下生成 mainfest.json
//webpack.dll.conf.js
const webpack = require('webpack');
const path = require('path');
const vendors = [ 'vue', 'vue-router', 'vuex', 'axios'];
module.exports = {
output: {
path: path.resolve(__dirname, '../static/js'),
filename: 'dll.[name].js', library: '[name]'
},
entry: { vendor: vendors, },
plugins: [
new webpack.DllPlugin({
path: 'manifest.json',
name: '[name]',
context: __dirname
})
]
}复制代码
在项目配置文件(如webpack.base.conf.js)中通过DllRe引入
// build/webpack.base.conf.js
const manifest = require('../manifest.json')
// 插件中引入
plugins: [
new webpack.DllReferencePlugin({
mainfest
})
]复制代码
然后在index.html手动引入该文件
复制代码
externals配合cdn加载第三方库
externals的作用是从打包的bundle文件中排除依赖。通俗点讲,就是在项目中通过import引入的依赖在打包的时候不会打包到bundle包中去,而是通过script的方式去访问这些依赖。与Dll不同的是,要去维护cdn
// build/webpack.base.conf.js
// externals 对象中的 key代表第三方依赖名(同package.json包中依赖名)
// value代表暴露给外部使用的别名 这里element-ui的别名为ELEMENT
module.exports ={
externals: {
'vue':'Vue',
'vue-router':'VueRouter',
'axios':'axios',
'vuex':'Vuex',
'element-ui':'ELEMENT'
}
}复制代码
在index.html文件中通过cdn方式引入
// head中引入
// body中引入
复制代码
在相关文件中移除相关引入的依赖
// main.js
//通过cdn的方式注释相关依赖
// import Vue from "vue";
// import ElementUI from "element-ui";
// Vue.use(ElementUI);
// store/index.js
// 注释掉vuex import引入方式
// import Vue from 'vue';
// import Vuex from 'vuex';
// Vue.use(Vuex);
// router/router.js
// 注释掉vue-router
// import Vue from 'vue';
// import Router from 'vue-router';
//使用externals中vue-router暴露的全局对象名VueRouter进行实例化
const router = new VueRouter({
mode: "history",
scrollBehavior: () => ({y: 0}),
routes: [otherRouter, ...constantRouterMap]
});复制代码
分析工具
查看 webpack 打包后所有组件与组件间的依赖关系,可以通过打包分析 工具 来实现。
webpack-bundle-analyzer
webpack-bundle-analyzer是一个webpack打包分析插件,它将打包的依赖关系以树形图的方式呈现,直观方便。
plugins:[
new BundleAnalyzerPlugin({
analyzerPort: 8080,
generateStatsFile: false
})
]复制代码
在插件配置项中引入并通过 cnpm run build --report 来生成可视化分析图,效果图如下:
官方分析工具
webpack提供的一个官方工具,可查看你的项目版本信息,有多少modules,多少chunks,中间有多少错误信息、有多少警告,各个模块之间的依赖关系等。
使用方式
首先通过 webpack --config ./build/webpack.prod.conf.js --json > stats.json 生成 json 文件(ps:如果使用了Happypack,需删除该json文件前两行,否则不是标准的json),然后通过官网分析工具地址将该文件上传,如图所示:
具体分析结果可以通过点击相应的模块查看详情。
总结
webpack优化并没有一个通用方案,这里我只是列出了我使用过的一些策略,具体业务需具体分析,对症下药。希望本文能帮助到一些有需要的小伙伴~