Webpack面试题（二）

// 引入插件
const TerserJSPlugin = require('terser-webpack-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')

// 增加 webpack 配置
    optimization: {
        minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
    },

    optimization: {
        // 分割代码块
        splitChunks: {
                  chunks: 'all',
            /**
             * initial 入口 chunk，对于异步导入的文件不处理
                async 异步 chunk，只对异步导入的文件处理
                all 全部 chunk
             */

            // 缓存分组
            cacheGroups: {
                // 第三方模块
                vendor: {
                                        name:'vendor'//chunk名称
                    priority: 1, // 权限更高，优先抽离，重要！！！
                    test: /node_modules/,
                    chunks: 'initial',
                    minSize: 0,  // 大小限制
                    minChunks: 1  // 最少复用过几次
                },

                // 公共的模块
                common: {
                                        name:'common'//chunk名称 
                    chunks: 'initial',
                    minSize: 0,  // 公共模块的大小限制
                    minChunks: 2  // 公共模块最少复用过几次
                }
            }
        }
    }

setTimeout(() => {
    import('./dynamic-data.js').then(res => {
        console.log(res.default.message)  // 注意这里的 default
    })
}, 1500)

 三、概念问题

module chunk bundle区别

module	一切皆模块 不管什么文件 所有源码文件都是module
chunk	多模块的合成  如entry  splitChunk会包含多个模块 是还没有整理的输出
bundle	最终的输出文件 可以理解为chunk整理后的输出

优化打包速度

    plugins: [
        new webpack.IgnorePlugin(/\.\/locale/, /moment/), 
        // 忽略 moment 下的 /locale 目录

import moment from 'moment'
import 'moment/locale/zh-cn' // 手动引入中文语言包
moment.locale('zh-cn')
const r = moment().endOf('day').fromNow()
console.log(r)

• 小图片base64编码 就不做网络请求了
• bundle+hash 代码没有变化 hash就不会有变化 不需要重新加载
• 懒加载
• 提取公共代码splitChunks
• IngorePlugin
• 使用CDN加速
• *使用production 
• *Scope Hosting

• 自动开启压缩代码 是代码体积更小 线上速度更快
• Vue React等会自动删掉调试代码（如开发环境下的warning)
• 启动Tree-Shaking**

Scope Hosting