web前端

vue-cli3打包优化

2020-05-22  本文已影响0人  姜治宇

打包的常用优化策略有:

1、去掉console.log
2、去掉sourcemap
3、库文件不参与打包

vue-cli3变化较大,这些优化策略如何配置呢?
手动创建vue.config.js:

module.exports = {
    productionSourceMap: false,//去掉sourcemap

    publicPath:"./",//一般配置相对路径

    //outputDir 时生成的生产环境构建文件的目录, 打包输出目录。 默认dist
    outputDir:'dist',
    devServer:{
      port: 9001,//dev 开发环境端口配置 为9000, 不配 默认为8080
      // proxy: {
      //   '/api': {
      //     target: 'http://192.168.110.150:8080/api',//开发服务器
      //     //target: 'http://192.168.200.51:3000/mock/151/api',//mock服务器
      //     changeOrigin: true,
      //     pathRewrite: {
      //     "^/api": ""
      //     }
      //   }
      // }
    },
    //该对象将会被 webpack-merge 合并入最终的 webpack 配置。
    configureWebpack:config => {
        if (process.env.NODE_ENV === 'production') {
            //去掉项目里面console
            config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true;
            config.externals = {
                'vue': 'Vue',
                'view-design': 'iview',
            }
        }
    }
}

其中最重要的就是configureWebpack这一项,这个传object对象或函数都可以,但函数更常用,因为从形参config里面可以获取和修改一些重要参数,比如externals的配置。

上一篇下一篇

猜你喜欢

热点阅读