vue項目 打包文件大小分析

vuecli3.0項目搭建與webpack-bundle-analyzer分析

首先說一下vuecli低版本與cli3.0的項目結構的區別   

少了build config 文件夾  如果需要進行webpack等配置 

需要在根目錄新建  vue.config.js

cli低版本

cli高版本

 

vue.config.js 文件內容   本次只記錄  打包大小分析以及優化包大小

module.exports = {
  publicPath: './',
  // 輸出文件目錄
  outputDir: 'dist',
  // 靜態資源目錄 (js, css, img, fonts)
  assetsDir: 'assets',
  // webpack-dev-server 相關配置
  devServer: {
    // 默認打開瀏覽器
    open: true,
    // 端口號
    port: 8080,
  },
  // webpack 配置
  chainWebpack: (config) => {
    // 第一 增加打包文件大小分析
    if (process.env.use_analyzer) {
      config
        .plugin('webpack-bundle-analyzer')
        .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
    }
  },
  //webpack配置
  configureWebpack: config => {
      //警告 webpack 的性能提示
      config.performance = {
        hints: 'warning',
        //入口起點的最大體積
        maxEntrypointSize: 50000000,
        //生成文件的最大體積
        maxAssetSize: 30000000,
        //只給出 js 文件的性能提示
        assetFilter: function (assetFilename) {
          return assetFilename.endsWith('.js');
        }
      },
      // 打包忽略
      config.externals = {
        'vue': 'Vue',
        'vue-router': 'VueRouter',
        'element-ui': 'ELEMENT'
        }
  }
}

第一 打包分析 webpack-bundle-analyzer 

  首先 下載依賴  npm intall webpack-bundle-analyzer –save-dev

  其次  在vue.config.js文件配置  

    chainWebpack: config => {

        config

            .plugin('webpack-bundle-analyzer')

            .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)

    }

可以再package.json加入啓動的命令

"scripts": {

"analyz": "use_analyzer=true npm run serve"

}

效果圖