webpack系列笔记（5）性能优化

最新推荐文章于 2024-08-15 13:59:56 发布

spicyboiledfish

最新推荐文章于 2024-08-15 13:59:56 发布

阅读量468

点赞数

分类专栏： Webpack

本文链接：https://blog.csdn.net/SpicyBoiledFish/article/details/102548462

版权

本文介绍了webpack的性能优化方法，包括px转rem配置、静态资源内联、样式注入方式、html压缩、多页面应用打包策略、sourceMap的启用、公共资源提取、tree shaking和死代码消除、Scope Hoisting的原理及开启、懒加载与动态import的实现以及webpack与ESLint的结合使用。详细讲解了各种优化技术的实践步骤和应用场景。

摘要由CSDN通过智能技术生成

移动端css px自动转换成rem:

px2rem-loader:

{ 

loader: 'px2rem-loader', 

options: { 

remUnit: 75, 

// 1个rem是多少px, 一般以750设计稿，

vw/10是75 remPrecision: 8 

// rem计算保留8个小数点 

} }

静态资源内联：

css内联：

方法一：借助style-loader:

{ loader: 'style-loader', options: { insert: 'top',

// 样式插入到<head>

injectType: 'singletonStyleTag',

// 将所有的style标签合并成一个 } } }

方法二：html-inline-css-webpack-plugin:

将<link rel="stylesheet" /> => <style>...<style/>

const HTMLInlineCSSWebpackPlugin = require('html-inline-css-webpack-plugin').default; ... plugins: [ new HTMLInlineCSSWebpackPlugin() ]

raw-loader: 只能安装0.5.1版本，否则会报错

html-webpack-plugin: html压缩的plugin.可以自动创建html模板组件，默认支持html、ejs, 其他模板引擎需要相关加载器。

<!DOCTYPE html> <html lang="en"> <head> ${ require('raw-loader!./meta.html') } <title>Document</title> <script>${ require('raw-loader!babel-loader!../node_modules/lib-flexible/flexible.js') }</script> </head> <body> <div id="root"></div> </body> </h