WebPack优化

目录

1 常用的loader和plugin

2 WebPack多入口配置:

3 如何抽离压缩css文件

4 webpack如何抽离公共代码和第三方代码

 5 webpack如何实现异步加载JS (懒加载)

6  module chunk bundle 的区别

7  webpack优化构建速度

hard-source-webpack-plugin

8 webpack 优化产出代码

9 什么是Tree-Shaking

10 ES6 Module和 Commonjs区别

11什么是 Scope Hosting?

12 babel 

Polyfill

分割线

Webpack构建速度优化

1  缩小范围

2 noParse

3 IgnorePlugin

 4 优化 resolve 配置

alias

---

1 常用的loader和plugin

1.    file-loader加载文件，url-loader也可以加载文件但是当文件小于阙值转为base64返回，url-loader封装了file-loader

1. css-loader处理css文件、style-loader将css代码以style标签注入到html文件中，less-loader转less文件为css文件

2. postCss-loader转换css文件，例如添加前缀，转换单位

3. babel-loader转es6为es5，转换react语法

4. vue-loader处理vue文件

5. eslint-loader检查代码规范

6. devServer 配置服务器webpack-dev-server开发环境静态服务器（属性host、port、proxy、contentbase根目录）

7. devtool配置sourcemap类型

2 WebPack多入口配置:

1. entry需要多入口配置，{chunkname: filePath/file.js}

2 out需要动态配置[name].hash.js

3 htmlwebpackplugin需要生成多个html（属性template,fimename,chunks），配置html要引入的chunks

3 如何抽离压缩css文件

在本地的代码中可以用style-loader把CSS文件放到style中，
但是线上必须要把CSS进行抽离，压缩，不然代码体积很大。

不抽离的CSS文件其实是通过js文件写入html的style标签中的 ，这样要执行js才能把css解析出来放入html中，效率很低。

抽离 css 和 less ：
注意这里不再使用style-loader，而是使用 MiniCssExtractPlugin.loader 单独拎出来

1. 抽离：使用miniCssExtratPlugin插件，rules中使用miniCssExtratPlugin.loader替换style-loader，plugin中配置MiniCssExtratPlugin

2. 压缩：在webpack optimization属性中配置minmizer，使用optimizeCssAssetsPlugin等工具压缩css文件去除空格和注释

webpack5现在一般要使用CssMinimizerPlugin + MiniCssExtractPlugin，之前的optimize-css-assets-webpack-plugin会报错

const path = require("path");
const {merge} = require("webpack-merge");
const common = require("./webpack.common");
const {CleanWebpackPlugin} = require("clean-webpack-plugin");
const {distPath, srcPath} = require("./path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = merge(common, {
    mode: "production",
    module: {
        rules: [
            {
                test: /\.css$/,
                include: srcPath,
                exclude: /node_modules/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
            },
            {
                test: /\.less$/,
                include: srcPath,
                exclude: /node_modules/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader']
            }
        ]
    },
    output:{
        path:distPath,
        filename:'bundle.[contenthash:8].js'
    },
    plugins: [
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename:'main.[contenthash:8].css'
        })
    ],
    optimization:{
        minimizer:[
            new CssMinimizerPlugin()
        ]
    }
})

4 webpack如何抽离公共代码和第三方代码

对应 html 中引入哪些 js 可以在 HtmlWebpackPlugin 中的 chunks 中 配置

在生产的配置中进行公共代码和第三方代码的抽离：
在 optimization 中加 splitChunks