webpack打包优化(最终极版)

以前公司里有优化的时候,打包优化和代码优化都是他来办，好家伙现在只剩下我一人了，为了在公司站住脚特意去度娘那里请教了一番，发现并不是那么难，以下就是我webpack打包的最终极版，把10MB变成300KB不在话下。

 一，webpack配置

vue-cli3以后，我们修改webpack配置，需要自己在项目根路径下创建vue.config.js文件。

1，配置静态资源路径

module.exports = {
  publicPath: './', // 静态资源路径（默认/，打包后会白屏）
  outputDir: 'dist', // 打包后文件的目录 （默认为dist）
  assetsDir: 'static', //  outputDir的静态资源(js、css、img、fonts)目录  默认为‘’没有单独目录js/css/img在根目录中。
  }

 2，去处生产环境

module.exports = {
  //去除生产环境的productionSourceMap
  productionSourceMap: false,
}

区别

• 如果没有去除环境变量的时候，打包运行代码如果报错的话会指向没有打包格式化的代码，去除了的话则恰恰相反，会指向打包格式化的代码。
• 去除前10MB，去除后3MB。大约减少整体代码的3/2。

3，使用CDN加速优化

在开发一个项目的时候我常常会用到一些插件比如说，vant，element，axios，vuex，等。

而这些插件呢，我们是直接下载到项目里的，再说了我又不在这些代码里修改，是完完全全的死代码，那我只要使用网络的请求来获取一下它们，岂不是美哉？

const isProduction = process.env.