vue_cli项目打包优化（完整）

我的项目本身没配置的时候打包出来时14M,

配置优化后是2.4M,

用了压缩打包image-webpack-loader后2.3M (可能我的图片都是svg的哈)

可以创建一个 webpack.config.js 然后导入进去vue.config.js中就好了

const IS_PROD = process.env.NODE_ENV == 'production'
const path = require('path')
module.exports = {
  css: {
    // 是否使用css分离插件 ExtractTextPlugin
    extract: true,
    // 开启 CSS source maps?
    sourceMap: false,
    // css预设器配置项
    loaderOptions: {},
    // 启用 CSS modules for all css / pre-processor files.
    // modules: true
  },
  productionSourceMap: false, //.map 文件的作用：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。 有了 .map 就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。
  chainWebpack: config => { //图片的压缩处理
    config.module
      .rule('images')
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      .options({
        bypassOnDebug: true
      })
      .end()
  },
  configureWebpack: {
    devtool: IS_PROD ? false : 'source-map',
    /**devtool
     * 1.(none) ：(省略devtool选项)-不触发SourceMap。这是一个很好的选择。
     * 2.source-map：一个完整的SourceMap是作为一个单独的文件。它为bundle 添加了引用注释
     *，因此开发工具知道在哪里找到它。 
    */
    optimization: {
      minimize: true,
      moduleIds: 'hashed',//知道webpack当选择模块id时需要使用转换算法。将optimization.moduleIds设置为 false会识webpack没有任何内置的算法会被使用，但自定义的算法会由插件提供。optimization.moduleIds的替代值是false。
      namedChunks: true,//告知的WebPack使用可读取的块标识符（可读块标识符），来帮助更好地调试.webpack配置中如果没有设置此选项，默认会在模式 development启用，在模式 production禁用。
      namedModules: true,//告知的WebPack使用可读取模块标识符（可读模块标识符），来帮助更好地调试.webpack配置中如果没有设置此选项，默认会在模式 development启用，在模式 production禁用。
      runtimeChunk: {
        name: 'manifest'
      },
      splitChunks: {
        chunks: 'all', //这表明将选择哪些块进行优化。当提供一个字符串，有效值为all，async和initial。提供all可能特别强大，因为它意味着即使在异步和非异步块之间也可以共享块。
        name: false,
        cacheGroups: {
          libs: {
            name: 'vendor-libs',
            minChunks: 2, //拆分前必须共享模块的最小块数。
            priority: 10,//number一个模块可以属于多个缓存组。优化将首选具有较高的缓存组priority。默认组的优先级为负，以允许自定义组获得更高的优先级（默认值适用0于自定义组）。
            test: /[/]node_modules[/]/, //控制此缓存组选择的模块。省略它会选择所有模块。它可以匹配绝对模块资源路径或块名称。匹配块名称时，将选择块中的所有模块。
            chunks: 'initial' // 只打包初始时依赖的第三方
          },
          commons: {
            name: 'common-chunks',
            test: path.resolve('src/components'), // 可自定义拓展你的规则
            minChunks: 2, // 最小共用次数
            priority: 5,
            reuseExistingChunk: true //如果当前块包含已从主捆绑包中拆分出的模块，则它将被重用，而不是生成新的模块。这可能会影响块的结果文件名。
          },
          ui: {
            name: 'common-ui', // 单独将 elementUI 拆包
            priority: 20, // 权重要大于 libs 和 app 不然会被打包进 libs 或者 app
            test: /[/]node_modules[/]element-ui[/]/
          },
          vendor: {
            name: 'vendor',
            test: chunks => {
              return chunks.context && chunks.context.indexOf('node_modules') !== -1
            },
            minChunks: 1,
            chunks: 'all',
            priority: 1,
            reuseExistingChunk: true
          },
          default: false
        }
      }
    },
    // plugins: [  //开启后发现打包的容量更大了， 暂时关闭
    //    new CompressionPlugin({  //开启 gzip 压缩
    //       test: /\.js$|\.html$|\.css/,
    //       threshold: 10240,
    //       deleteOriginalAssets: false
    //   })
    // ],
    resolve: {
      modules: [
        // 指定在这些目录里寻找引用的库，提高搜索效率
        path.resolve(__dirname, './node_modules')
      ]
    }
  }
}

其实我再项目中都有注释

几个方面吧：

1、css单个抽离打包

2、 .map ：productionSourceMap: false,（代码中有说明）

3、图片的压缩处理： image-webpack-loade

4、webpack optimization优化：可以看下官网 https://webpack.js.org/configuration/optimization/#root

其实我具体都有注释的说明不明白自己去官网看看吧。或者先复制在项目中看看是不是对你的项目打包优化了呢

test: /[/]node_modules[/]element-ui[/]/

其实你需要关注的是 test: /[/]node_modules[/]element-ui[/]/

我在项目中用的是element.你要是用其他ui的花换下就好了

最后是需要导入在vue.config.js的