网站代备案,wordpress 改中文,网站开发公,设计中国第一架飞机文章目录 速度分析#xff1a;使用 speed-measure-webpack-plugin体积分析#xff1a;使用webpack-bundle-analyzer使用高版本的 webpack 和 Node.js多进程/多实例构建资源并行解析可选方案使用 HappyPack 解析资源使用 thread-loader 解析资源 多进程并行压缩代码方法一使用 speed-measure-webpack-plugin体积分析使用webpack-bundle-analyzer使用高版本的 webpack 和 Node.js多进程/多实例构建资源并行解析可选方案使用 HappyPack 解析资源使用 thread-loader 解析资源 多进程并行压缩代码方法一使用 parallel-uglify-plugin 插件方法二uglifyjs-webpack-plugin 开启 parallel 参数方法三terser-webpack-plugin 开启 parallel 参数 进一步分包预编译资源模块分包设置 Externals进一步分包预编译资源模块 充分利用缓存提升二次构建速度缩小构建目标与减少文件搜索范围缩小构建目标减少文件搜索范围 使用Tree Shaking擦除无用的JavaScript和CSS使用webpack进行图片压缩压缩有问题构建体积优化动态 Polyfill 速度分析使用 speed-measure-webpack-plugin
使用speed-measure-webpack-plugin插件。
官网地址https://github.com/stephencookdev/speed-measure-webpack-plugin#readme
示例效果
安装
npm i speed-measure-webpack-plugin -D使用
const SpeedMeasurePlugin require(speed-measure-webpack-plugin);
const smp new SpeedMeasurePlugin();module.exports smp.wrap({// 其他省略plugins: [new MyPlugin(), new MyOtherPlugin()]
});速度分析插件作用
分析整个打包总耗时每个插件和loader的耗时情况
体积分析使用webpack-bundle-analyzer
示例代码
const BundleAnalyzerPlugin require(webpack-bundle-analyzer).BundleAnalyzerPlugin;module.exports {plugins: [new BundleAnalyzerPlugin()]
}安装
npm i webpack-bundle-analyzer -D可以分析哪些问题
依赖的第三方模块文件大小业务里面的组件代码大小
使用高版本的 webpack 和 Node.js
高版本的webpack和node.js降低了构建时间。
使用webpack4的优化原因
V8 带来的优化for of 替代 forEach、Map 和 Set 替代 Object、includes 替代 indexOf默认使用更快的 md4 hash 算法webpacks AST 可以直接从 loader 传递给 AST减少解析时间使用字符串方法替代正则表达式
多进程/多实例构建
资源并行解析可选方案
parallel-webpackHappyPackthread-loader
使用 HappyPack 解析资源
原理每次 webapck 解析一个模块HappyPack 会将它及它的依赖分配给 worker 线程中。
安装
npm i happypack -D使用示例
const HappyPack require(happypack);exports.module {rules: [{test: /.js$/,// 1) replace your original list of loaders with happypack/loader:// loaders: [ babel-loader?presets[]es2015 ],use: happypack/loader,include: [ /* ... */ ],exclude: [ /* ... */ ]}]
};exports.plugins [// 2) create the plugin:new HappyPack({// 3) re-add the loaders you replaced above in #1:loaders: [ babel-loader?presets[]es2015 ]})
];使用 thread-loader 解析资源
由于webpack4.x目前只能安装thread-loader3.0.0版本3.0.0以后的版本需要webpack5.x。
原理每次 webpack 解析一个模块thread-loader 会将它及它的依赖分配给 worker 线程中
npm i thread-loader3.0.0 -D配置
module: {rules: [{test: /.js$/,use: [{loader: thread-loader,options: {workers: 3}},babel-loader]}]}多进程并行压缩代码
方法一使用 parallel-uglify-plugin 插件
const ParalleUglifyPlugin require(webpack-parallel-uglify-plugin);
module.exports {plugins: [new ParalleluglifyPlugin({uglifyjs: {output: {beautify: false,comments: false},compress: {warnings: false,drop_console: true,collapse_vars: true,reduce_vars: true}}})]
};方法二uglifyjs-webpack-plugin 开启 parallel 参数
建议webpack3.x使用该插件。
const UglifyJsPlugin require(uglifyjs-webpack-plugin);
module.exports {plugins: [new UglifyJsPlugin({uglifyoptions: {warnings: false,parse: {},compress: {},mangle: true,output: null,toplevel: false,nameCache: null,ie8: false,keep_fnames: false},parallel: true})]
};方法三terser-webpack-plugin 开启 parallel 参数
webpack4.x及以上建议使用terser-webpack-plugin插件 注Using Webpack v4, you have to install terser-webpack-plugin v4. 安装
npm i terser-webpack-plugin4 -D配置
const TerserPlugin require(terser-webpack-plugin);module.exports {optimization: {minimizer: [new TerserPlugin({parallel: true})]}
};
进一步分包预编译资源模块
分包设置 Externals
思路将 vue、react、react-dom 等基础包通过cdn 引入不打入 bundle 中。
方法使用html-webpack-externals-plugin。
安装
npm i html-webpack-externals-plugin -D配置
const HtmlWebpackExternalsPlugin require(html-webpack-externals-plugin);module.exports {plugins: [new HtmlWebpackExternalsPlugin({externals: [{module: react,entry: https://unpkg.com/react18.2.0/umd/react.production.min.js,global: React},{module: react-dom,entry: https://unpkg.com/react-dom18/umd/react-dom.production.min.js,global: ReactDOM}]})]
};进一步分包预编译资源模块
思路将react、react-dom基础包和业务基础包打包成一个文件
方法使用DLLPlugin进行分包DllReferencePlugin对 manifest.json 引用
DllPlugin负责抽离第三方库形成第三方动态库dll。DllReferencePlugin负责引用第三方库。
使用 DLLPlugin 进行分包
新建一个webpack.dll.js
const path require(path);
const webpack require(webpack);module.exports {entry: {library: [react, react-dom]},output: {filename: [name].dll.js,path: path.join(__dirname, build/library),library: [name]_[hash:8] // 保持与webpack.DllPlugin中name一致},plugins: [new webpack.DllPlugin({name: [name]_[hash:8], // 保持与output.library中名称一致path: path.join(__dirname, build/library/[name].json)})]
};在package.json中添加命令
scripts: {dll: webpack --config webpack.dll.js
}最后执行npm run dll,结果在工程根目录下有如下文件
build library.dll.jslibrary.json
使用 DllReferencePlugin 引用 manifest.json
在webpack.prod.js中插件中配置如下
plugins: [new webpack.DllReferencePlugin({manifest: require(./build/library/library.json)})
]当执行npm run build 后其实index.html页面中没有引入library.dll.js文件我们可以通过安装add-asset-html-webpack-plugin插件webpack4.x版本使用add-asset-html-webpack-plugin3
npm i add-asset-html-webpack-plugin3 -D在webpack.prod.js中插件中配置如下
plugins: [new webpack.DllReferencePlugin({manifest: require(./build/library/library.json)}),new AddAssetHtmlPlugin({filepath: path.resolve(./build/library, library.dll.js)})
]起作用 就是把build/library/library.dll.js拷贝到编译后的dist文件夹下并且通过script标签引入到index.html中。
最终页面生成的效果
!DOCTYPE html
html langen
meta charsetutf-8
headtitleDocument/titlelink hrefsearch_42937580.css relstylesheet
/head
bodydiv idroot/divscript srclibrary.dll.js/scriptscript srcsearch_c1f12d25.js/script
/body
/htmladd-asset-html-webpack-plugin参考地址https://www.npmjs.com/package/add-asset-html-webpack-plugin/v/3.2.2?activeTabversions
充分利用缓存提升二次构建速度
目的提升二次构建速度。
缓存思路
babel-loader 开启缓存terser-webpack-plugin 开启缓存使用 cache-loader 或者 hard-source-webpack-plugin
开启了对应方式的缓存会在node_modules目录下的cache文件夹看到缓存的内容如下结构
node_modules .cache babel-loaderhard-sourceterser-webpack-plugin
1、babel-loader 开启缓存
rules: [{test: /.js$/,use: [babel-loader?cacheDirectorytrue]}
]如果是使用的HappyPack配置如下
new HappyPack({loaders: [babel-loader?cacheDirectorytrue]
})2、terser-webpack-plugin 开启缓存
optimization: {minimizer: [new TerserPlugin({parallel: true,cache: true})]}3、hard-source-webpack-plugin开启缓存 安装
npm i hard-source-webpack-plugin -D配置
const HardSourceWebpackPlugin require(hard-source-webpack-plugin);module.exports {plugins: [new HardSourceWebpackPlugin()]
}在webpack4.x中会报错。
缩小构建目标与减少文件搜索范围
缩小构建目标
目的尽可能的少构建模块
比如 babel-loader 不解析 node_modules rules: [{test: /.js$/,include: [path.resolve(__dirname, src)],use: [babel-loader]}当然也可以使用exclude来缩小构建范围。
减少文件搜索范围
优化 resolve.modules 配置减少模块搜索层级优化 resolve.mainFields 配置优化 resolve.extensions 配置合理使用 alias
示例代码
resolve: {alias: {: path.resolve(__dirname, src),react: path.resolve(__dirname, ./node_modules/react/umd/react.production.min.js),react-dom: path.resolve(__dirname, ./node_modules/react-dom/umd/react-dom.production.min.js)extensions: [.js],mainFields: [main]},使用Tree Shaking擦除无用的JavaScript和CSS
概念1 个模块可能有多个方法只要其中的某个方法使用到了则整个文件都会被打到 bundle 里面去tree shaking 就是只把用到的方法打入 bundle 没用到的方法会在 uglify 阶段被擦除掉。
使用webpack 默认支持在 .babelrc 里设置 modules: false 即可
production mode的情况下默认开启
要求必须是 ES6 的语法CJS 的方式不支持
无用的 CSS 如何删除掉
PurifyCSS: 遍历代码识别已经用到的 CSS classuncss: HTML 需要通过 jsdom加载所有的样式通过PostCSS解析通过document.querySelector 来识别在 html 文件里面不存在的选择器
在 webpack 中如何使用 PurifyCSS? PurifyCSS官网已经不再维护了使用 purgecss-webpack-plugin这个插件和 mini-css-extract-plugin 配合使用。
安装purgecss-webpack-plugin插件
npm i purgecss-webpack-plugin4 -D配置
const MiniCssExtractPlugin require(mini-css-extract-plugin)
const PurgeCSSPlugin require(purgecss-webpack-plugin)const PATHS {src: path.join(__dirname, src)
}module.exports {// 其他省略module: {rules: [{test: /\.css$/,use: [MiniCssExtractPlugin.loader,css-loader]}]},plugins: [new MiniCssExtractPlugin({filename: [name].css,}),new PurgeCSSPlugin({paths: glob.sync(${PATHS.src}/**/*, { nodir: true }),}),]
}使用webpack进行图片压缩压缩有问题
基于 Node 库的 imagemin 或者 tinypng API。
使用配置 image-webpack-loader。
安装image-webpack-loader:
npm i image-webpack-loader6 -D其中imagemin-mozjpeg对node版本有要求 engines: {node: ^12.20.0 || ^14.13.1 || 16.0.0}配置
{
test: /.(png|jpe?g|gif)$/,use: [{loader: file-loader,options: { name: [name]_[hash:8].[ext] }},{loader: image-webpack-loader,options: {mozjpeg: {progressive: true,quality: 65},// optipng.enabled: false will disable optipngoptipng: {enabled: false},pngquant: {quality: [0.65, 0.9],speed: 4},gifsicle: {interlaced: false},// the webp option will enable WEBPwebp: {quality: 75}}}]
}Imagemin的优点分析
有很多定制选项可以引入更多第三方优化插件例如pngquant可以处理多种图片格式
Imagemin的压缩原理
pngquant: 是一款PNG压缩器通过将图像转换为具有alpha通道通常比24/32位PNG文件小60-80的更高效的8位PNG格式可显著减小文件大小。pngcrush:其主要目的是通过尝试不同的压缩级别和PNG过滤方法来降低PNG IDAT数据流的大小。optipng:其设计灵感来自于pngcrush。optipng可将图像文件重新压缩为更小尺寸而不会丢失任何信息。tinypng:也是将24位png文件转化为更小有索引的8位图片同时所有非必要的metadata也会被剥离掉
构建体积优化动态 Polyfill
直接把babel-polyfill打包到工程一般会很大。
Polyfill Service原理识别 User Agent下发不同的 Polyfill
如何使用动态 Polyfill service
polyfill.io 官方提供的服务
script srchttps://cdn.polyfill.io/v3/polyfill.js/script
