webpack用法总结---性能优化

Posted 2021-04-29 Mini代码

今天继续分享性能优化的方法

一、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-->jquery jquery:['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-line console.log('注册成功'); }).catch(() => { // eslint-disable-next-line console.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代码,让某个文件单独打包成一个chunk import 动态导入语法:能将某个文件单独打包 webpackChunkName给打包文件命名*/
import(/*webpackChunkName:'test'*/'./test').then(({mul,jian})=>{ // eslint-disable-next-line console.log(mul(2,9));}).catch(()=>{ // eslint-disable-next-line console.log("文件加载失败");})