携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第22天，点击查看活动详情

js+css压缩

js压缩

1.安装uglifyjs-webpack-plugin

npm install -D uglifyjs-webpack-plugin

2.在webpack.config.js中进行配置

const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')

optimization: {
        minimize: true, 
        minimizer: [
            new UglifyjsWebpackPlugin({sourceMap: true})
        ]
    },

3.这个时候打包，就看到打包后的js文件是压缩过的

css压缩

这里压缩css使用到的是webpack中的插件css-minimizer-webpack-plugin

1.安装css-minimizer-webpack-plugin

npm install -D css-minimizer-webpack-plugin

2.在webpack.config.js中进行配置

const CssMiniPlugin = require('css-minimizer-webpack-plugin')

optimization: {
        minimize: true, 
        minimizer: [
            new UglifyjsWebpackPlugin({sourceMap: true}),
            new CssMiniPlugin() // 新增
        ] 
    },

3.这个时候重新打包后的css就是被压缩过的了

treeshaking

功能：打包过滤掉没有使用到的代码

treeshaking触发条件：

1.只支持ESM规范

2.使用解构的方法，可以触发treeshaking

3.同一文件的treeshaking有触发条件，条件就是Mode=production

4.一定要注意使用解构来加载模块

splitChunks

功能：代码分割

optimization: {
        minimize: true, 
        minimizer: [
            new UglifyjsWebpackPlugin(),
            new CssMiniPlugin(),
        ],
        splitChunks: {
            chunks: 'all', // 全部打包
            minSize: 100 * 1024, // 100kb 才 分割
            name: 'common', // 重命名文件
            // 独立打包
              cacheGroups: {
                jquery: {
                    name: 'jquery',
                    test: /jquery/,
                    chunks: 'all'
                }
            }
        }
    },

1.chunks: 'all', 全部打包

2.minSize: 100 * 1024, // 100kb 才分割

3.name: 'common', // 重命名文件

重新打包后就会生成common.js

ejs实现公共代码复用

有很多文件有很多公共的html代码

这里我们可以使用ejs模板来复用这些html代码

首先创建 src/ejs/header.ejs

将Index.html中的head部分的代码拷贝到header.ejs中

然后在 index.html中的head部分使用 ejs语法来加载 ejs的head模板

<%=require('./ejs/header.ejs')() %>

然后需要使用 ejs-loader来帮助我们识别ejs语法

首先安装下ejs-loader

npm install -D ejs-loader

然后在 webpack.config.js中配置

{
                test: /.ejs/,
                loader: 'ejs-loader',
                options: {
                    esModule: false
                }
            }

最后重新打包后，就可以再dist/index.html中看到 head部分的html代码.

这样就达到了代码复用

cleanWebpackPlugin清空dist目录

我们每次打包后的dist目录是没有自动清除的，这个使用webpack提供的插件来帮忙自动将dist清除。

这个时候需要使用clean-webpack-plugin这个插件

首先安装下

npm install -D clean-webpack-plugin

然后再webpack.config.js中进行配置

const CleanWebpackPlugin = require('clean-webpack-plugin')


 new CleanWebpackPlugin()

后面每次打包都会先把dist目录清除再进行打包

其他优化

webpack 打包优化方向

打包速度:优化打包速度，主要是提升了我们的开发效率，更快的打包构建过程，将让你保持一颗愉悦的心

打包体积:优化打包体积，主要是提升产品的使用体验，降低服务器资源成本，更快的页面加载，将让产品显得更加“丝滑”，同时也可以让更快

1. 优化 loader 搜索范围

对于 loader 来说，影响打包效率首当其冲必属 Babel 了。因为 Babel 会将代码转为字符串生成 AST，然后对 AST 继续进行转变最后再生成新码，项目越大，转换代码越多，效率就越低。优化正则匹配、使用 include 和 exclude 指定需要处理的文件,忽略不需要处理的文件

rules: [{
// 优化正则匹配
test: /.js$/,
// 指定需要处理的目录
include: path.resolve(__dirname, 'src')
// 理论上只有include就够了，但是某些情况需要排除文件的时候可以用这个，排除不需要处理文件 // exclude: []
}]

2. 多进程 / **多线程
**受限于 node 是单线程运行的，所以 webpack 在打包的过程中也是单线程的，特别是在执行 loader 的时候，长时间编译的任务很多，这样就会

等待的情况。我们可以使用一些方法将 loader 的同步执行转换为并行，这样就能充分利用系统资源来提高打包速度了

{
    test: /.js?$/,
    exclude: /node_modules/,
    use: [
    {
      loader: "thread-loader",
      options: {
workers: 3 // 进程 3 个 }
}, {
        loader: "babel-loader",
options: {
  presets: ["@babel/preset-env"],
  plugins: ["@babel/plugin-transform-runtime"]
}
} ]
},

webpack进行项目优化(2)