如何减少webpack打包体积

关于项目中如何减少webpack打包体积的优化项：

1. 减少图片的体积
   1. 　　包括压缩图片，雪碧图，尽量使用svg矢量图
2. 路由懒加载
   1. 在路由配置里面使用require引入组件，每个组件大概会减少10-50kb体积的包
      

      component:resovle=>{require['../views/'page1'],resovle}

       

   2. 使用cdn引入vue、echarts等的核心代码，在wabpack打包的时候移除相关源代码，按此方法修改，vue大约可以减少70—80kb的打包体积，echarts大约可以减少100—120kb的打包体积（其他大型的源代码也可按此方法操作），示例如下：
      在vue.config.js的配置改动
      

      config.configureWebpack.externals = {
            vue:'Vue',
            echarts:'echarts'   
      }

      并在html文件里面使用cdn引入：

      <script src="./commonFile/js/vue.min.js"></script>
      <script src="./commonFile/js/echarts.min.js"></script>

       

3. 公共的组件逻辑 可以抽出复用
4. 相关ui框架按需加载
   

   import {button, table, message} from 'element-ui'
   import {swiper} from 'vue-awesome-swiper'

    

5. 静态资源文件的托管（CDN）
   修改vue.config.js配置文件，静态资源文件（如图片、文件、公共方法等），可以使用CDN托管静态资源文件，大大减少打包后的体积，图片的数量越多甚至可达到3—4Mb
   

   // 基础配置
   var config = {
     productionSourceMap: false,// 如果不需要生产时的源映射，那么设置为false可以加速生产构建
     chainWebpack: config => {
       if (process.env.VUE_APP_CURRENTMODE !== 'prod' && process.env.VUE_APP_CURRENTMODE !== 'prodtest') {
         config.module.rule("images")
           .test(/\.(jpg|png|gif|svg|jpeg)$/)
           .use("url-loader")
           .loader("url-loader")
           .options({
             limit: 3 * 1024,
             name: `${appName}/img/[name].[ext]`
           }).end();
       } else {
         config.module.rule("images")
           .test(/\.(jpg|png|gif|svg|jpeg)$/)
           .use("url-loader")
           .loader("url-loader")
           .options({
             limit: 3 * 1024,//可以限制图片的大小，如超过3Mb的图片使用CDN，小图标可以使用本地资源图片
             publicPath: '这里存放CDN图片的url地址前缀',//这里存放CDN图片的url地址前缀
             name: '[name].[ext]'
           }).end();
       }
     }
   }

    

原文链接：https://blog.csdn.net/shalDream/article/details/123035583