-
优化打包速度，我们先分析哪些地方可能会影响到我们的打包速度
- 我们在进行打包的时候需要获取到所有的依赖模块
- 解析所有的依赖模块，解析成浏览器能够识别的代码
- 将所有的依赖打包成一个文件，需要对代码进行压缩
- 二次打包时间，文件修改的时候需要重新打包
- 运行在 Node.js 之上的 webpack 是单线程模式的，逐个文件进行解析
- webpack 缓存，将结果缓存到磁盘，提高第二次构建的速度
- 代码压缩（ParallelUglifyPlugin 插件实现了多线程压缩）
- 优化搜索时间- 缩小文件搜索范围 减小不必要的编译工作（loader配置test 、 include 、 exclude命中规则， alias配置）
-
优化包体积
- 压缩js （ParallelUglifyPlugin）
- 提取css，把css文件提取到单独的css样式文件中，因为css和js并行加载的 （mini-css-extract-plugin）
- 压缩css （optimize-css-assets-webpack-plugin）
-
首屏优化
- cdn缓存
- tree-shaking
- 提取公用的代码（SplitChunksPlugin）
- 按需加载
webpack优化篇
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 前言 笔者最近在整理关于 webpack 相关的知识点，一方面是因为自己掌握的知识点比较零碎、不够系统，有时候碰到...
- webpack webpack 最出色的功能之一就是，除了 JavaScript，还可以通过 loader 引入任...
