如何高效运用Webpack实现代码分离与优化技巧？

本文共计1925个文字，预计阅读时间需要8分钟。

分离代码文件+在此之前，首先要知道常规配置中的+output+中有filename和chunkFilename的区别；简单来说，在entry定义的入口文件走的就是filename配置项，在入口文件内部引入的通常是chunkFilename配置项。

分离代码文件

在此之前，首先要知道经常配置的 output 中有关 filename 和 chunkFilename 的区别；简单来说在 entry 定义的入口文件走的就是 filename 配置项，在入口文件内部引入的通常情况下是 chunk，走 chunkFilename 的配置

所以很多时候分离代码文件就是将不同的 chunk 分离开来，生产环境中有利于浏览器缓存，加快二次访问的速度

代码分离的时候，optimization 中配置的 splitChunks 默认就是 async，默认对异步代码进行分离；所以通常情况下能用异步的用异步 import；配合 prefetching 和 preloading 能够产生很好的效果

filename 和 chunkFilename 的区别

output: { filename: '[name].js', chunkFilename: '[name].chunk.js' }

举个例子

如果入口文件是 main.js

那么打包后生成的文件是 main.js

如果 main.js 中引入了其他模块，比如引入了 lodash 那么可能会生成一个名为 lodash.chunk.js 文件

基本概念了解了，接下来开始对 js 和 css 文件进行分离的操作：

js 代码分离

js 代码的分离操作，首先要考虑的就是对异步代码的分离。