webpack性能优化 | 8月更文挑战

这是我参与8月更文挑战的第5天，活动详情查看：8月更文挑战

首先说明优化目的：css

一、加速打包时间html

二、减小打包后的体积vue

1、加速打包时间

要加速打包时间，就须要先缩⼩⽂件搜索范围，通常影响总体打包的时间主要是loader和plugin两个的编译构建的过程。须要先压缩，再优化，能够减小不少打包时间。因此咱们要先减小搜索文件的过程，提早编译和缓存等几个方法实现node

一、优化loader查找文件范围react

能够使用test、include、exclude三个配置项来缩⼩loader的处理范围，推荐includejquery

//string
    include: path.resolve(__dirname, "./src"),
//array
include: [
     path.resolve(__dirname, 'app/styles'),
     path.resolve(__dirname, 'vendor/styles')
]
复制代码

注：exclude 优先级要优于 include 和 test ，因此三个都配置时， exclude 会优先于其余两个配置webpack

二、优化resolve.modules配置web

reslove.modules用于配置webpack打包后在哪一个目录下查找模块，默认是node_modules，能够配置：npm

module.exports={
     resolve:{
         modules: [path.resolve(__dirname, "./node_modules")]
     }
}
复制代码

三、优化resolve.alias配置json

resolve.alias主要是配置别名，把原路径映射为一个新配置的路径，咱们能够直接指定文件路径，避免查找的耗时

alias: {
     "@": path.join(__dirname, "./pages"),
     react: path.resolve(
         __dirname,
         "./node_modules/react/umd/react.production.min.js"
     ),
     "react-dom": path.resolve(
         __dirname,
         "./node_modules/react-dom/umd/react-dom.production.min.js"
     )
},
resolve: {
     alias: {
         "@assets": path.resolve(__dirname, "../src/images/"),
     },
}

 //html-css中使⽤
 .sprite3 {
     background: url("~@assets/s3.png");
 }
复制代码

四、优化resolve.extensions配置

resolve.extensions在导入语句没写入文件后缀时，webpack会自动带入后缀，并尝试查找文件是否存在

默认配置：extensions:['.js','.json','.jsx','.ts']

因此咱们在开发过程当中，尽可能带入后缀，减小查找文件的时间

五、使用cache缓存

webpack打包的核心是js文件的打包，js使用babel-loader。因此打包时间长主要是babel-loader执行太慢致使的，这时须要使用exclude和include来准确的肯定转换内容的范围，并减小重复文件的转换，形成打包后文件体积过大，也会增大编译速度。

使用cacheDirectory配置给babel编译时指定的目录，而且用于缓存加载的结果，可是默认是false，须要手动设置为true，默认的缓存目录是node_modules/.cache/babel-loader ，可是若是在任何根⽬录下都没有找到 node_modules ⽬录，就会降级回退到操做系统默认的临时⽂件⽬录。

rules: [
     {
         test: /\.js$/,
         loader: 'babel-loader',
         options: {
             cacheDirectory: true
         },
     }
];
复制代码

2、减小打包后的体积

除了构建以外，压缩打包后的体积也比较重要，除了上面提到的cache还能够使用terser-webpack-plugin的时候配置使用多线程和缓存实现。

题外话：在2017年的时候，刚会vue一年，由于项目中必须使用jq，打包后体积太大，成为当时一大难题，弄了一两天才解决，真的是各个方面都要考虑到，解决办法下面会提到

const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
     optimization: {
         minimizer: [
             new TerserPlugin({
                 cache: true, // 开启缓存
                 parallel: true // 多线程
             })
         ]
     }
};
复制代码

还能够使用cdn地址或者本身服务器的地址存放一些静态资源文件，这样在打包的时候就不须要打包一大堆东西了，能够很大程度的减小打包后的体积，好比：超大的背景图片，jq地址使用cdn，echarts图表类的等，

若是须要在使用的时候能够经过import的方法引入jq(import $ from 'jquery')或echarts而且不会对其打包，能够尝试配置externals

//webpack.config.js
module.exports = {
     externals: {
         //jquery经过script引⼊以后，全局中即有了 jQuery 变量
         'jquery': 'jQuery'
     }
}
复制代码

CSS的压缩

使用optimize-css-assets-webpack-plugin，是一个压缩css的插件，默认引擎是cssnano，css-loader已经集成了cssnano，能够使用optimize-css-assets-webpack-plugin来自定义规则

//安装命令
npm install cssnano -D
npm i optimize-css-assets-webpack-plugin -D
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
new OptimizeCSSAssetsPlugin({
     cssProcessor: require("cssnano"), // 能够指定引擎，默认是 cssnano
     cssProcessorOptions: {
         discardComments: { removeAll: true }
     }
})
复制代码

HTML的压缩

//使用html-webpack-plugin
new htmlWebpackPlugin({
     title: "京东商城",
     template: "./index.html",
     filename: "index.html",
     minify: {
         // 压缩HTML⽂件
         removeComments: true, //删掉HTML里的注释
         collapseWhitespace: true, // 删除空⽩符和换⾏符
         minifyCSS: true // 压缩内联css
     }
})
复制代码

JS的压缩

虽然webpack会自动压缩js，可是仍是推荐使用terser-webpack-plugin，也是webpack官方维护的插件。

const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
     optimization: {
         minimizer: [new TerserPlugin(
             parallel: true //使用并开启多线程减小压缩的耗时
         )]
     }
};
复制代码