webpack 打包优化
栏目: JavaScript · 发布时间: 6年前
内容简介:最后修改router.js,将所有路由都改为动态加载新增webpack.dll.conf.js 文件 Dll打包以后是独立存在的,只要其包含的库没有增减、升级,hash也不会变化,因此线上的dll代码不需要随着版本发布频繁更新。App部分代码修改后,只需要编译app部分的代码,dll部分,只要包含的库没有增减、升级,就不需要重新打包。这样也大大提高了每次编译的速度。
2. router 按需加载
最后修改router.js,将所有路由都改为动态加载
//router.js //原来的写法:import Home from '@/components/PC/Home' //改成下面这种形式(其他路由同理) const Home = () => import('@/components/PC/Home') 复制代码
3.添加dll
新增webpack.dll.conf.js 文件 Dll打包以后是独立存在的,只要其包含的库没有增减、升级,hash也不会变化,因此线上的dll代码不需要随着版本发布频繁更新。
App部分代码修改后,只需要编译app部分的代码,dll部分,只要包含的库没有增减、升级,就不需要重新打包。这样也大大提高了每次编译的速度。
假设你有多个项目,使用了相同的一些依赖库,它们就可以共用一个dll
const path = require('path'); const webpack = require('webpack'); const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); module.exports = { mode: 'none', entry: { vue: ['vue/dist/vue.js', 'vue', 'vue-router', 'vuex'], comment: ['jquery', 'lodash', 'jquery/dist/jquery.js'] }, output: { path: path.join(__dirname, '../static/dll/'), filename: '[name].dll.js', library: '[name]' }, plugins: [ new webpack.DllPlugin({ path: path.join(__dirname, '../static/dll/', '[name]-manifest.json'), name: '[name]' }) ], optimization: { minimizer: [ new UglifyJsPlugin() ] } }; 复制代码
执行命令,生产dll json webpack --config config/webpack.dll.conf.js
util.js plugins 添加
new webpack.DllReferencePlugin({ manifest: require('../static/dll/vue-manifest.json') }), new webpack.DllReferencePlugin({ manifest: require('../static/dll/comment-manifest.json') }) 复制代码
index.html 添加文件连接
<script src="/static/dll/vue.dll.js"></script> <script src="/static/dll/comment.dll.js"></script> 复制代码
4.添加SplitChunksPlugin
提取node_modules 初始化模块,并设置缓存
optimization: { splitChunks: { chunks: 'all', minChunks: 3, cacheGroups: { vendor: { test: /node_modules/, chunks: 'initial', name: 'vendor', priority: 10, enforce: true } } } }, 复制代码
5.提取css
{ test: /\.css$/, use: [ MiniCssExtractPlugin.loader, 'css-loader' ] } 复制代码
new MiniCssExtractPlugin({ filename: isBuild? 'css/[name].css':'css/[name]_[hash].css' }) 复制代码
5.提取element ui
element: { test: /node_modules\/element-ui/, chunks: 'initial', name: 'element', priority: 10, enforce: true }, 复制代码
new HtmlWebpackPlugin({ template: './pages/index.html', chunks: ['vendor', 'app', 'element'] }) 复制代码
6.按需加载babel-polyfill
babel-polyfill的缺点 使用后打包后的体积很大,因为babel-polyfill是一个整体,把所有方法都加到原型链上。比如我们只使用了Array.from,但它把Object.defineProperty也给加上了,这就是一种浪费了。 使用@babel/runtime和@babel/plugin-transform-runtime 用插件后,Babel就会使用babel@runtime下的 工具 函数,将Promise重写成_Promise(只是打比方),然后引入_Promise helper函数。这样就避免了重复打包代码和手动引入模块的痛苦。
.babel
"plugins": [ "@babel/plugin-transform-runtime" ] 复制代码
polyfills.js 删除babel-polyfill
//import 'babel-polyfill'; //import "core-js/modules/es6.promise"; 复制代码
总结
app.js 1.78M -> 125k 体积减小 90%
vendor.js 324k -> 208k 体积减小 35%
由之前的3个包 拆分打包成多个 ,按需加载。
速度篇
building modules chunk asset optimization
之前是 60s-70s 体积优化后稳定在 40-50s(稳定在45s左右) 提升速度 20% 左右
1.使用 webpack-parallel-uglify-plugin 插件来压缩代码
当 Webpack 有多个 JavaScript 文件需要输出和压缩时,原本会使用 UglifyJS 去一个个挨着压缩再输出, 但是 ParallelUglifyPlugin 则会开启多个子进程,把对多个文件的压缩工作分配给多个子进程去完成
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin'); new ParallelUglifyPlugin({ uglifyOptions: { // 最紧凑的输出 beautify: false, // 删除所有的注释 comments: false, compress: { warnings: false, // 警告开关 drop_console: true, // 内嵌定义了但是只用到一次的变量 collapse_vars: true, // 提取出出现多次但是没有定义成变量去引用的静态值 reduce_vars: true } }, sourceMap: false, parallel: true , // 并行处理打包文件 cache: true // 使用缓存 }) 复制代码
[34.463, 38.368, 37.928, 36.127, 38.007] 平均 36.9786 36s 缩短 添加后稳定在 30-40s 大约10s
2.用 Happypack 来加速代码构建
happypack把任务分解给多个子进程去并发的执行,子进程处理完后再把结果发送给主进程
new HappyPack({ id: 'babel', loaders: [ { loader: 'babel-loader', query: '?cacheDirectory', options: { presets: ['@babel/env'] } }], threadPool: happyThreadPool, verbose: true }), 复制代码
{ test: /\.js$/, include: [srcPath, iqiyiPath], exclude: /(node_modules|bower_components)/, loader: 'happypack/loader?id=babel' }, 复制代码
[35.357, 37.762, 44.798, 33.635, 33.427, 33.473, 32.468] 均值 35.845
new HappyPack({ id: 'vue-loader', loaders: ['vue-loader'], threadPool: happyThreadPool, verbose: true }) 复制代码
{ test: /\.vue$/, include: srcPath, loader: 'happypack/loader?id=vue-loader' }, 复制代码
[37.683, 39.648, 35.499, 35.108, 37.419, 35.862] 均值 36.869
new HappyPack({ id: 'css-loader', loaders: ['css-loader'], threadPool: happyThreadPool, verbose: true }) 复制代码
{ test: /\.css$/, use: [ MiniCssExtractPlugin.loader, //'css-loader' 'happypack/loader?id=css-loader' ] } 复制代码
[ 39.394, 39.443, 35.080, 37.253 ,37.501, 35.632] 均值 37.383
[35.639, 36.382, 34.144, 33.420, 34.641, 32.504, 34.313] 34.434 速度稳定在30-35之间,缩短大约 1-2s
3.添加babel cacheDirectory
4.devtool
devtool: 'source-map' 构建速度: 25.133, 26.545, 25.956, 24.763, 26.953 ~ 25.869 重新构建速度: 1.387, 1.632 ,1.872, 1.809, 0.932 ~ 1.526
devtool | 构建速度 | 重新构建速度 | 生产环境 | 品质(quality) |
---|---|---|---|---|
eval | 21.473 +++ | 0.6822 +++ | no | 生成后的代码 |
cheap-eval-source-map | 23.251 + | 0.8622 ++ | no | 转换过的代码(仅限行) |
cheap-module-eval-source-map | 24.9536 o | 1.124 ++ | no | 原始源代码(仅限行) |
eval-source-map | 24.161 -- | 0.9534 + | no | 原始源代码 |
总结
最终打包速度从 60-70 降低到 30-35s 降低大约 20-25s 左右 提升速度大约 30% 左右 开发速度 二次打包速度 从 2.7~2.9s 左右降低到 0.6~0.9s,大约提速2s ,提速 60%-70% 左右 devtoo:eval
左右降低到 0.8~1.3s, 平均1.124,大约提速1s ,提速 35% 左右 devtoo:cheap-module-eval-source-map
以上所述就是小编给大家介绍的《webpack 打包优化》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 【前端打包部署】谈一谈我在SPA项目打包=>部署的处理
- Maven多模块项目打包前的一些注意事项(打包失败)
- tar打包如何不打包某一个文件夹(排除某些文件夹)
- iOS新手用swift写一个macos打包工具 一键打包到指定位置
- Android应用签名打包
- 多渠道打包
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
The Creative Curve
Allen Gannett / Knopf Doubleday Publishing Group / 2018-6-12
Big data entrepreneur Allen Gannett overturns the mythology around creative genius, and reveals the science and secrets behind achieving breakout commercial success in any field. We have been s......一起来看看 《The Creative Curve》 这本书的介绍吧!