美文网首页web前端
vue-cli3打包优化

vue-cli3打包优化

作者: 姜治宇 | 来源:发表于2020-05-22 14: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的配置。

    相关文章

      网友评论

        本文标题:vue-cli3打包优化

        本文链接:https://www.haomeiwen.com/subject/vxkswhtx.html