vue项目使用externals优化打包体积

查看打包体积

• 下载查看打包体积的插件

npm install webpack-bundle-analyzer -save-dev

• 在vue.config.js中配置

  chainWebpack: config => {
    // 打包结果分析
    if (process.env.NODE_ENV === "development") {
      config
        .plugin("webpack-bundle-analyzer")
        .use(require("webpack-bundle-analyzer").BundleAnalyzerPlugin);
    }
  },

• 运行npm run serve 就可以看到
  
• 目前我运行的这个项目是个新项目提交较小。
• 当项目依赖比较多的时候，包的体积会变大

体积优化

• 当项目依赖过多时，这是包的体积就会变大，影响项目加载速度
  webpack官网简介
  
• 列如echarts的引入，去官网下载最新的解压文件
  
  一个压缩一个未压缩
• index.html引入

  <script src="./js/echarts.js"></script>

• 这里可以做下判断。开发环境引未压缩的，生成环境引压缩版本
• 然后在vue.config.js配置

  // 调整 webpack 配置
  configureWebpack: config => {
    config.externals = {
      echarts: "echarts"
    };
  },

• 说明：echarts: “echarts”'的写法主要是因为项目中导入的import echarts from ‘echarts’
• 引号前面的是项目中使用到的第三方引入的包名
• 引号后面的会从引入的文件中查找相应的变量
• 配置完后，就可以在项目中import echarts from 'echarts’引入echarts就不会报错了
• 像vue和elemengUI等都可以按照次方式来引入配置，就可以减少打包的体积