vuecli3打包规范

使用VUECLI进行的项目打包上线时发现包很大，并且不管是js还是css都分别在chunk-vendors.js和chunk-vendors.css文件下。
虽说VUECLI3中集成的webpack4已经会帮我们做一些按需引入等打包工作，但是对我们来说这些在开发过程中依然是有些不够的。
下面我简单说一下近期小白开发过程中进行的打包操作。

1.最重要的也是最基本的操作，不生成map文件
在 vue.config.js 文件(如果没有就在在项目根目录下手动新建)中配置

module.exports = {
	// 生产环境 sourceMap
	productionSourceMap:false
}

map文件的作用：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。
有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。

2.基于路由的动态加载

//使用 AMD 风格的 require加载页面
const Home = resolve => require(['./Home.vue'], resolve);
//路由
const router = new VueRouter({
  routes: [
    { 
    	path: '/home', 
    	component: Home 
    }
  ]
})

当然你也可以为路由分组（把组件按组分块）

// require.ensure 是 Webpack 的特殊语法，用来设置 code-split point
const Home = r => require.ensure([], () => r(require('./Home.vue')), 'group-foo')
const Login = r => require.ensure([], () => r(require('./Login.vue')), 'group-foo')

当然如果你使用webpack大于2.4，可以参考在vue中使用import()来代替require.ensure()实现代码打包分离

3.组件按需加载
现在的组件很多都已经实现并且都有说明例如我上一篇vuecli3 element按需加载按需引入(包括样式)

4.服务器开启Gzip(vue-cli3.0已经开启，这个无需关注)
5.启用CDN加速，将一些静态资源放入服务器进行加载,比如vue、vuex、router等。
6.Bundle splitting
安装插件

npm install uglifyjs-webpack-plugin -S

修改vue.config.js文件

const path = require("path");
const UglifyPlugin = require("uglifyjs-webpack-plugin");
module.exports = {
  lintOnSave: false, // eslint-loader 是否在保存的时候检查
  // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  // webpack配置
  // eslint-disable-next-line no-unused-vars
  chainWebpack: config => {},
  configureWebpack: config => {
    if (process.env.NODE_ENV === "production") {
      // 为生产环境修改配置...
      config.mode = "production";
      // 将每个依赖包打包成单独的js文件
      let optimization = {
        runtimeChunk: "single",
        splitChunks: {
          chunks: "all",
          maxInitialRequests: Infinity,
          minSize: 20000,
          cacheGroups: {
            vendor: {
              test: /[\\/]node_modules[\\/]/,
              name(module) {
                // get the name. E.g. node_modules/packageName/not/this/part.js
                // or node_modules/packageName
                const packageName = module.context.match(
                  /[\\/]node_modules[\\/](.*?)([\\/]|$)/
                )[1];
                // npm package names are URL-safe, but some servers don't like @ symbols
                return `npm.${packageName.replace("@", "")}`;
              }
            }
          }
        },
        minimizer: [
          new UglifyPlugin({
            uglifyOptions: {
              compress: {
                drop_console: true, // console
                drop_debugger: false,
                pure_funcs: ["console.log"] // 移除console
              }
            }
          })
        ]
      };
      Object.assign(config, {
        optimization
      });
    } else {
      // 为开发环境修改配置...
      config.mode = "development";
    }
    Object.assign(config, {
      // 开发生产共同配置
      resolve: {
        alias: {
          "@": path.resolve(__dirname, "./src"),
          "@c": path.resolve(__dirname, "./src/components"),
          "@p": path.resolve(__dirname, "./src/pages")
        } // 别名配置
      }
    });
  },
  productionSourceMap: false, // 生产环境是否生成 sourceMap 文件
  // css相关配置
  css: {
    extract: true, // 是否使用css分离插件 ExtractTextPlugin
    sourceMap: false, // 开启 CSS source maps?
    loaderOptions: {
      css: {}, // 这里的选项会传递给 css-loader
      postcss: {} // 这里的选项会传递给 postcss-loader
    }, // css预设器配置项
    modules: false // 启用 CSS modules for all css / pre-processor files.
  },
  parallel: require("os").cpus().length > 1 // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。
};

参考Web 性能优化：使用 Webpack 分离数据的正确方法

1.最重要的也是最基本的操作，不生成map文件
在 vue.config.js 文件(如果没有就在在项目根目录下手动新建)中配置

module.exports = {
	// 生产环境 sourceMap
	productionSourceMap:false
}

猜你喜欢