访问网址: https://github.com/webpack/analyse
"scripts": { "dev-build": "webpack --profile --json > stats.json --config ./build/webpack.dev.js", }
执行上述语句,指的是 将打包的进程放入 stats.json 文件中
如果不能访问给出的网址:
使用翻墙软件 shadowsock ------ https://jingyan.baidu.com/article/8065f87f412d93233024987f.html
或者用IE 浏览器打开:http://webpack.github.com/analyse
其它的可视化分析工具,详见官方网站 https://github.com/webpack-contrib/webpack-bundle-analyzer
"analyz": "cross-env npm_config_report=true npm run build"
使用方法:
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; if(process.env.npm_config_report){ prodConfig.plugins.push(new BundleAnalyzerPlugin()); }
1 js压缩!
webpack4中如果使用 production 模式,默认是开启js压缩功能的。
默认optimization.minimize是true,所以js可以自动帮你压缩
但是自定义minimizer后,webpack默认配置会取消掉。
文档还很皮的告诉你,如果你用了css压缩,记得自己用uglifyjs压缩js呀。。。
optimization:{ minimizer:[ new TerserPlugin(),//删除后发现文件变大,确实进行了压缩 ] }
PS附上尚未压缩和压缩js后的文件代码对比图,文件是vendor.js
图一是尚未压缩的代码:
图二是压缩后的代码:
2. 使用preloading 和 prefetching
官方建议配置代码分割是 async 而不是 all
optimization: { splitChunks: { chunks: 'all' //默认的是async 只对异步代码进行分割 } }
因为对于同步代码进行代码分割,第一次加载后有缓存,只有再第二次访问还会有效果;但这个初衷是第一次访问的时候就要是最快的。
看下面的例子:
点击一屏幕,生成一个元素,在index.js 文件中:
document.addEventListener('click',()=>{ const element = document.createElement('div'); element.innerHTML = 'Dell Lee'; document.body.appendChild(element); })
在控制台中 ctrl + shift +p 输入 cover 打开的show coverage 面板:
可以看到当前操作 代码的利用率情况,点击某一个文件 红色的表示没有被利用 绿色的表示使用了的,这样上述代码中,由于点击屏幕加载的 生成元素的代码 就是没有被利用的。
只有点击屏幕生成元素的代码 才变成 绿色 表示被利用了
所以建议这样去写:
document.addEventListener('click', () =>{ import('./click.js').then(({default: func}) => { func(); }) });
对应的click.js 写法:
function handleClick() { const element = document.createElement('div'); element.innerHTML = 'Dell Lee'; document.body.appendChild(element); } export default handleClick;
这个js文件会被单独打包成一个js文件,点击屏幕的时候 才会加载进来 比如要引入 日历组件;
预加载:
document.addEventListener('click', () =>{ import(/* webpackPrefetch: true */ './click.js').then(({default: func}) => { func(); }) });
这样就会在网络空闲的时候,加载click.js文件。再如异步加载的第三方库
async yibuTest(){ let _ = await import(/* webpackPrefetch: true *//*webpackChunkName:"lodash" */'lodash'); let newStr = _.join([1,2],'%'); console.log(newStr); }
3 打包出来的配置 使用 chunkFilename
module.exports = { entry: { main: './src/index.js' }, optimization:{ splitChunks:{ chunks:'all' } }, output:{ filename:'[name].js', chunkFilename:'[name].chunk.js', path:path.resolve(__dirname,'../dist') } }
分析: 入口文件的key值是 main,所以走output中的 filename中main.js;由于配置的 splitChunks 的chunks是all,所以会默认打包 间接引入的文件 import文件,默认在vernders组下,这里配置的chunkFilename即间接打包生成的文件名字,所以生成的文件是:
-dist -index.html -main.js -vendors~lodash.chunk.js
4. 打包css文件,生成css文件
如果不做配置,import引入的css文件会默认打包到js文件中,所以要使用官方推荐的css打包插件: mini-css-extract-plugin
但是该插件暂时不支持 HRM 热更新,所以只在线上版本上使用。也就是在 webpack.prod.json 文件中进行配置:
首先安装该插件 npm install --save-dev mini-css-extract-plugin //安装插件
然后在配置文件中使用:
{ module: { rules:[{ test: /.scss$/, use: [ MiniCssExtractPlugin.loader, //在上线配置文件中对css和scss文件,用插件替换原来的 style.loader { loader: 'css-loader', options: { importLoaders: 2 } }, 'sass-loader', 'postcss-loader' ] }, { test: /.css$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader' ] }] }, plugins: [ new MiniCssExtractPlugin({ //插件在这里使用 filename: '[name].css', chunkFilename: '[name].chunk.css' //css文件import进来的文件在这里配置文件名 }) ] }
此外,由于之前在配置 tree-shaking 也就是 使用到代码 才进行打包:
optimization:{ usedExports:true //即对所有的模块都进行tree-shaking }
还在package.json中进行配置:
{ "sideEffects":false }
表示对所有的文件进行tree-shaking,所以对inport的css文件发现没有使用,则删除了。
所以要进行配置:
{ "sideEffects": [ "*.css" ] }
对生成的css文件,进行压缩,使用插件 optimize-css-assets-webpack-plugin
npm install --save-dev optimize-css-assets-webpack-plugin
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin"); { optimization: { //对抽离出来的css文件进行合并和压缩 minimizer: [new OptimizeCSSAssetsPlugin({})] } }
更多配置详见官网:(比如多个css入口打包成多个文件或者一个文件)
https://webpack.js.org/plugins/mini-css-extract-plugin/
附:
使用ExtractTextWebpackPlugin单独抽取css注入
5 打包生成的文件中带上hash值
{ output: { filename:'[name].[contenthash].js', chunkFilename:'[name].[contenthash].js' } }
webpack中hash、chunkhash、contenthash区别
https://www.cnblogs.com/raind/p/9750586.html
简单来说:
1.hash 如果都使用hash的话,因为这是工程级别的,即每次修改任何一个文件,所有文件名的hash至都将改变。所以一旦修改了任何一个文件,整个项目的文件缓存都将失效
2.chunkhash 根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk,生成对应的哈希值。在生产环境里把一些公共库和程序入口文件区分开,单独打包构建,接着我们采用chunkhash的方式生成哈希值,那么只要我们不改动公共库的代码,就可以保证其哈希值不会受影响。因为我们是将样式作为模块import到JavaScript文件中的,所以它们的chunkhash是一致的;
3.contenthash 是针对文件内容级别的,只有你自己模块的内容变了,那么hash值才改变.
注意事项:
新版本的webpack可以,但是旧版本的webpack,即使这样配置后,如果修改一处代码,生成的js名字还会发生变化,需要做下面的配置:
{ optimization: { runtimeChunk:{ name:'runtime' } } }
这样一些关联 vendor.js和main.js之间关联的代码就会生成在 runtime.js 中,这样修改业务代码,就不会再影响vendor代码了。