Webpack做过哪些性能优化(面试答案)

本文章自己整理,结合各种

两方面,一个是打包后产物的性能优化,一个是打包速度优化,

性能优化

1.代码分离,代码分离到不同的bundle中,之后可以按需加载,比如第三方依赖,首屏暂不使用的模块

代码分离方法:

1)入口起点:在entry配置手动分离代码Entry Dependencies(入口依赖)

注意引入时加defer,名字不能重复

2)自定义分包 (防止重复):通过使用插件,splitChunksPlugin来配置分离参数

optimization优化配置

例:类型,文件size minSize maxSize,并发数量等

webpack提供preload和prefetch的功能

3)动态倒入

1)import 动态倒入webpackchunkname

2.CDN优化

公司会有自己的cdn服务器,用来专门储存cdn包,可以直接使用

3.提取css文件-mini-css-extract-plugin,将css提取到一个独立的css文件中

4.js css代码压缩,有一个terser,webpack自带的,生产模式下有默认参数,能够丑化代码,构建时在minimizer属性下引入,进行打包构建的优化。。例如

5.自带tree-shaking,消除未调用的代码

6.webpack对文件压缩

有一个插件,compressionPlugin,能够对打包后的产物,js,css文件进行压缩

7.htmlwebpoackplugin里面也有一个参数,minify(可不说)

8.语法上,one of写法,include和exclude写法

9.babel层面,"useBuiltIns": "usage", 可以使得内置库core-js进行按需加载,无需全部引入

相关推荐
i听风逝夜10 小时前
Web 3D地球实时统计访问来源
前端·后端
iMonster10 小时前
React 组件的组合模式之道 (Composition Pattern)
前端
呐呐呐呐呢10 小时前
antd渐变色边框按钮
前端
元直数字电路验证10 小时前
Jakarta EE Web 聊天室技术梳理
前端
wadesir10 小时前
Nginx配置文件CPU优化(从零开始提升Web服务器性能)
服务器·前端·nginx
牧码岛10 小时前
Web前端之canvas实现图片融合与清晰度介绍、合并
前端·javascript·css·html·web·canvas·web前端
灵犀坠10 小时前
前端面试八股复习心得
开发语言·前端·javascript
9***Y4810 小时前
前端动画性能优化
前端
网络点点滴10 小时前
Vue3嵌套路由
前端·javascript·vue.js
牧码岛11 小时前
Web前端之Vue+Element打印时输入值没有及时更新dom的问题
前端·javascript·html·web·web前端