Vue打包大文件分析

分析得知,占用空间的大文件如下:

• .map
• vendor.[hash].js
• app.[hash].css
• 其余的大文件是一些高像素的图片, 是否需要压缩根据项目情况自定

一、.map文件

.map 文件是用作浏览器显示详细错误信息的, 只有Chrome有用, 正式环境不需要这样的功能;

// config/index.js
productionSourceMap: false

二、vendor.[hash].js

vendor.[hash].js文件主要内容是项目用到的第三方库: Vue|Element-ui|Vue-router|Vuex| axios 等.
开发怎么使用没有过多影响, 生产环境使用在打包的时候就会显得非常大(Element-ui全部引用了).
所以推荐生产环境采用cdn的方式.

<!-- 用cdn方式引用包需要注意引用时标注版本号 unpkg.com/:package@:version/:file 版本号依项目自定  -->
<script src="https://unpkg.com/vue@2.5.2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
<script src="https://unpkg.com/vuex@3.1.0/dist/vuex.js"></script>
<script src="https://unpkg.com/element-ui@2.6.1/lib/index.js"></script>

// 然后在 build/webpack.base.conf.js 文件 => module.exports 中做如下添加
// 参考 => '项目import时用的名称': '根据cdn引入使用的包名, 一般出自<global.xxx> xxx 就是需要用的名称'
externals: {
  'vue': 'Vue',
  'vue-router': 'VueRouter',
  'vuex': 'Vuex',
  'element-ui': 'ELEMENT',
},

三、app.[hash].css

app.[hash].css文件的压缩不是很重要, 大小异常是静态图片被webpack解析成base64形式
如果图片不是特别大, 建议不做处理

// build/webpack.base.conf.js => module.exports => module 修改
// limit: 10000 => limit: 800
{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  loader: 'url-loader',
  options: {
    limit: 800, 
    name: utils.assetsPath('img/[name].[hash:7].[ext]')
  }
},
// limit: 10000 指的是小于100kb的图片使用base64的方式放在 app.[hash].css 文件里引用

额外加分项

路由懒加载
参见官方详解:Vue路由懒加载

样式懒加载
需要用到一些插件: 根据 webpack x.x 版本来选择插件

// 引用了其他文章, 实际上也没太搞懂
// webpack 4.x

// define require
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

// use
{
  test: /\.(sc|sa|c)ss$/,
  use: [
    MiniCssExtractPlugin.loader,
    'css-loader',
    'postcss-loader',
    'sass-loader',
  ]
},

new MiniCssExtractPlugin({
  filename: devMode ? 'css/[name].css' : 'css/[name].[hash].css',
  chunkFilename: devMode ? 'css/[id].css' : 'css/[id].[hash].css',
}),