WebPack打包优化

置顶

小杨小杨、努力变强！

已于 2024-03-29 16:24:56 修改

阅读量974

点赞数

分类专栏：软件开发文章标签： webpack 打包 vue+webpack

于 2022-04-06 11:32:36 首次发布

本文链接：https://blog.csdn.net/qq_42717015/article/details/123985998

版权

一、打包去除.map文件

需要在vue.config.js增加属性productionSourceMap：false,

例如：

module.exports = {
    publicPath:"/pc/",
    productionSourceMap:false,
}

二、引用csdn固定vue文件路径

cdn方式引入外部的js库，链接：https://www.bootcdn.cn/

1. 在vue.config.js里面配置忽略打包文件

chainWebpack(config) {
    config.externals({
      'vue': 'Vue',
      'vuex': 'Vuex',
      'axios': 'axios',
      'element-ui': 'ELEMENT',
      'echarts': 'echarts',
      'XLSX': 'XLSX'
    })
  }

2.在html内部配置固定的csdn路径

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title><%= webpackConfig.name %></title>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.min.js" rel="stylesheet" type="text/javascript"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/vuex/3.1.0/vuex.min.js" rel="stylesheet" type="text/javascript"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.18.1/axios.min.js" rel="stylesheet" type="text/javascript"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.0/index.js" rel="stylesheet" type="text/javascript"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.4.0/echarts-en.min.js" rel="stylesheet" type="text/javascript"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/xlsx/0.15.6/xlsx.full.min.js" rel="stylesheet" type="text/javascript"></script>
</head>

三、删除项目中的console.log打印信息

npm install uglifyjs-webpack-plugin --save-dev

configureWebpack: (config) => {
        config.optimization.minimizer[0].options.terserOptions.compress.warnings = false;
		config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true;
		config.optimization.minimizer[0].options.terserOptions.compress.drop_debugger = true;
		config.optimization.minimizer[0].options.terserOptions.compress.pure_funcs = ['console.log'];
    },