使用webpack优化项目-CFANZ编程社区

1、生产环境关闭productionSourceMap、css sourceMap

SourceMap是当页面出现某些错误，能够定位到具体的某一行代码，Sourcemap就是帮你建立这个映射关系的，方便代码调试。

判断是否是生产环境
const  isProduction = process.env.NODE_ENV  === 'production'

module.exports = {
    productionSourceMap: !isProduction, // 关闭生产环境的sourcemap的映射文件
    css: {
        sourceMap: !isProduction, //css SourceMap的配置
    }

}

2、分析大文件

安装 npm install webpack-bundle-analyzer -D 插件，打包后会产生一个本地服务，清楚的展示打包文件的包含关系和大小

vue.config.js配置

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports = {
    ...其他
    configureWebpack: {
        plugins: [
            new BundleAnalyzerPlugin() //分析打包大小的默认配置
       ]
    }
}

通过图中可以发现：

1、element-ui和ant-design占了近1/4的大小：1.5

2、exceljs也是个大东西：1.3M、

3、echarts.js : 1M

4、moments.js ： 700kb

解决方案：

1、把必须用到的第三方插件使用cdn的方式引入。方便且速度快

获取cdn地址网站： BootCDN

第一步配置vue.config.js,让webpack不打包这些js，而是通过script标签加入

正式文件不打包公共js
const isPro = process.env.NODE_ENV ==== 'production';
let externals = [];
储存cdn的文件
let cdn = {
    css: [
        'https:cdn...........element-ui......css'
    ],
    js: []
}
正式环境才需要
 if(isPro) {
  externals = { //排除打包的js
       vue: 'Vue',
       'element-ui': 'ELEMENT'，
        echarts: 'echarts'
   }
    cdn.js = [
        'https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js', // vuejs
        'https://cdn.bootcdn.net/ajax/libs/element-ui/2.6.0/index.js', // element-ui js
        'https://cdn.bootcdn.net/ajax/libs/element-ui/2.6.0/locale/zh-CN.min.js',
        'https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js', 
     ]
 }
module.exports = {
    configureWebpack: {
        常用的公共js排除掉，不打包而是在index添加cdn,
           externals,
            其他配置
    }，
    chainWebpack: config => {
        注入cdn变量（打包时会执行）
        config.plugin('html').tap(args => {
            args[0].cdn = cdn // 配置cdn给插件
            return args
        })
    }


}

第二步：html模板中加入定义好的cdn变量使用代码

<!DOCTYPE html>
<html lang="">

<head>
<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>web</title>
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!-- 引入样式 -->
    <% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
       <link rel="stylesheet" href="<%=css%>" >
    <% } %>

    <!-- 引入JS -->
    <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
       <script src="<%=js%>"></script>
    <% } %>
</head>
<body style="font-size:14px">
    <section id="app"></section>
</body>
</html>

2、分下发现ant-design只是使用了其中一个插件，但是整个都被打包进来了

解决方案：舍弃ant-design的插件，自己实现需要的插件功能

使用按需加载

按需加载的配置方式：

安装npm i babel-plugin-import - D

在main.js中引入需要的组件Step

import {Step} from 'ant-design-vue'
Vue.component(Step.name,Steps);
Vue.components(Steps.step.name,Steps.Step);

在babel.config.js加上配置：

module.exports = {

    presets: ['@vue/cli-plugin-babel/preset'],
     以下按需加载的配置
    pluigins: [
        "import",{
            libraryName: 'ant-design-vue',
            libraryDirectory: 'es',
            style: true
          }
    ]
}

通过compress-webpack-plugin插件把代码压缩为gzip。但是需要服务器端支持。webpack的vue.config.js的配置如下

//打包压缩静态文件插件
const CompressionPlugin = require("compression-webpack-plugin")

//...其它配置
module.exports = {
    //...其它配置
    chainWebpack: config => {
        //生产环境开启js\css压缩
        if (isProduction) {
            config.plugin('compressionPlugin').use(new CompressionPlugin({
                test: /\.(js)$/, // 匹配文件名
                threshold: 10240, // 对超过10k的数据压缩
                minRatio: 0.8,
                deleteOriginalAssets: true // 删除源文件
            }))
        }
    }
    //...其它配置
}

服务端的nginx开启静态压缩（百度查询下如何配置）