webpack打包优化详解

先简单总结一下，优化Webpack打包可以通过多种方式来提高性能和减小文件大小。以下是一些常见的优化技巧：

1. 代码分割（Code Splitting）：将代码拆分成多个小块，使得在加载页面时只加载必要的代码。Webpack提供了多种代码分割的方法，如使用import()函数、SplitChunksPlugin插件等。

2. 懒加载（Lazy Loading）：将不需要立即加载的模块延迟加载，提高页面初次加载速度。通常与代码分割一起使用。

3. 压缩代码：使用Webpack的UglifyJsPlugin或TerserPlugin等插件来压缩和混淆JavaScript代码，减小文件大小。

4. 优化图片：使用url-loader或file-loader来处理图片，可以将小图片转换为Data URL，或者通过图片压缩工具来减小图片大小。

5. Tree Shaking：通过Tree Shaking只打包项目中用到的代码，去除未使用的代码，减小打包体积。确保在Webpack配置中开启了Tree Shaking。注意，webpack5版本的树摇功能比webpack4版本做了很大改进，请升级到webpack5版本哦。

6. 模块别名：通过配置Webpack的resolve.alias来设置模块别名，减少模块路径的解析时间。

    resolve: {
   // 设置模块如何被解析
      alias: {
   
        vue: "vue/dist/vue.esm-bundler.js"
      },
      extensions: ['.js', '.vue']// 按顺序解析这些后缀名
    },

7. 提取公共代码：使用SplitChunksPlugin或者optimization.splitChunks来提取公共代码，减少重复加载的代码，优化加载速度。

8. 缓存：通过设置output.filename和output.chunkFilename的hash值，使得文件名带有内容哈希，实现文件内容变化时，浏览器能够正确缓存文件。

9. 使用Webpack Bundle Analyzer：分析打包后的文件，找出体积较大的模块或者文件，针对性进行优化。

10. 减少loader和plugin的使用：尽量减少不必要的loader和plugin的使用，因为它们会增加打包时间和文件大小。

11. 使用DLLPlugin：将第三方库单独打包成一个动态链接库（DLL），可以减少每次打包时对第三方库的重新打包，提高打包速度。

12. 缩小Webpack搜索范围：通过配置resolve.modules、resolve.extensions、resolve.mainFields等参数，缩小Webpack搜索模块的范围，提高打包速度。

13. 线上模式mode: 'production'和开发环境模式mode : 'development'要区分设置,并根据不同的环境模式设置不同的devtool值。

一起来实践吧

1.优化图片

除了用雪碧图和手动压缩图片大小，webpack也可以进一步自动化优化图片，
使用url-loader或file-loader处理图片，并且结合image-webpack-loader来进行图片压缩：

// webpack.config.js
module.exports = {
   
  // 其他配置...
  module: {
   
    rules: [
      {
   
        test: /.(png|jpg|gif)$/