webpack用法总结---性能优化
今天继续分享性能优化的方法
一、dll
作用：node_modules所有包打包的时候会生成一个chunk,打包成一个文件,造成文件体积过大,通过dll技术将库打包成不同的chunk,生成多个文件
首先要写一个新的config文件/*使用dll技术,对某些库(vue/react/jQuery...)进行单独打包当运行webpack时,默认查找webpack.congfig.js配置文件需求:运行webpack.dll.js文件-->webpack --config webpack.dll.js*/const path = require('path');const webpack = require('webpack');module.exports = {entry:{//最终打包生产的name-->jqueryjquery:['jquery']}output:{filename:'[name].js',path:path.resolve(__dirname,'dll'),library:'[name]_[hash]'//打包的库里面向外暴露的内容叫什么名字},plugins:[//打包生成一个dll/manifest.json--->提供和jQuery的映射new webpack.DllPlugin({name:'[name]_[hash]',//映射库的暴露的内容名称path:path.resolve(__dirname,'dll/manifest.json')//输出文件路径})],mode:'production'}
二、externals
作用：打包代码的时候,如果用到第三方库,会将第三方库代码也打包进去,这样造成代码体积过大,所以可以在打包的时候排除第三方库，使用的时候可以通过CDN的方式引入
externals:{//拒绝jQuery被打包进来jquery:'jQuery'}<script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
三、PWA
作用：渐进式网络开发应用程序(离线可访问)
所用到的插件workbox-webpack-plugin
webpack配置:new WorkboxWebpackPlugin.GenerateSW({/*1.帮助serviceworker快速启动2.删除旧的serviceworker生成serviceworker配置文件*/clientsClaim:true,skipWaiting:true})
Js处理// 注册serviceworker// 处理兼容性问题if ('serviceWorker' in navigator) {window.addEventListener('load', () => {navigator.serviceWorker.register('/service-worker.js').then(() => {// eslint-disable-next-lineconsole.log('注册成功');}).catch(() => {// eslint-disable-next-lineconsole.log('注册失败');});});}
四、codesplit
1.多入口文件--会自动打包多个chunk
2.tree shaking
前提:a.必须使用es6模块化 b.开启production环境
作用:减少代码体积，去除无用代码
在package.json中配置
"sideEffects":false 所有代码都无副作用(都可以进行tree shaking)
问题:可能会把css/@babel/polyfill 文件干掉
"sideEffects":["*.css"]这样就不会干掉
3.多入口文件
添加配置/*1.可以将node_modules中代码单独打包一个chunk最终输出2.自动分析多入口chunk中,有没有公共的文件(大小不能太小),如果有会打包成单独一个chunk*/optimization:{splitChunks:{chunks:'all'}},
4.单入口文件
/*1.可以将node_modules中代码单独打包一个chunk最终输出*/optimization:{splitChunks:{chunks:'all'}},
Js文件配置/*通过js代码,让某个文件单独打包成一个chunkimport 动态导入语法:能将某个文件单独打包webpackChunkName给打包文件命名*/import(/*webpackChunkName:'test'*/'./test').then(({mul,jian})=>{// eslint-disable-next-lineconsole.log(mul(2,9));}).catch(()=>{// eslint-disable-next-lineconsole.log("文件加载失败");})