webpack4.0-webpack打包的优化（打包速度）-17

1、保证webpack、npm、node的版本比较新

2、其次在webpack.config.js中配置使用resolve来优化打包

resolve:{ // 配置模块如何被解析，能够提高webpack的打包速度
        alias: { // 配置别名，更容易引入
            child: path.resolve(__dirname, '../src/child')
        },
        extensions: ['.js','.jsx'] // 在打包编译时，优先查找和处理以js或jsx结尾的文件
    },

3、使用DllPlugin将第三方的库文件打包到一起，这样在打包时，业务中如果有使用到则直接使用已经打包好的

创建webpack.dll.js文件，通过将其打包为库文件，暴露出来，再通过webpack.DllPlugin进行库文件映射文件生成 文件名.manifest.json文件

const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const webpack = require('webpack')
module.exports = {
    mode: 'production',
    // name: '将第三方的包文件打包到一起，作文库文件',
    entry:{ // 指定要打包的第三方模块
        lodash: ['lodash'],
        jquery: ['jquery']
    },
    output:{
        filename:'[name].dll.js',
        path: path.resolve(__dirname, '../dll'),
        library: '[name]' // 将打包的文件作为库,通过全局变量暴露出去
    },
    plugins:[
        new CleanWebpackPlugin({cleanOnceBeforeBuildPatterns:['**/*','!static-files*']}),
        new webpack.DllPlugin({ // 通过webpack.DllPlugin对暴露的文件进行分析，生成一个manifest.json的映射文件
            name:'[name]', // 打包的库文件的名称
            path: path.resolve(__dirname, '../dll/[name].manifest.json')
        })
    ]
}

在webpack.config.js中配置对库文件的引用,

首先在html中引入对应的库安装 npm i add-asset-html-webpack-plugin --save-dev来是库引入html

通过webpack.DllReferencePlugin能够对库文件进行映射解析，是html能够引用到打包的库文件对象

const path = require('path')
const fs = require('fs')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const webpack = require('webpack')
const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin') // 将需要导入html的文件导入html
// 自动导入打包好的库文件
const plugins = [
    new HtmlWebpackPlugin({template:'./src/index.html'}),
    new CleanWebpackPlugin({cleanOnceBeforeBuildPatterns:['**/*','!static-files*']}),
    new webpack.HotModuleReplacementPlugin()
]
// 通过node分析dll文件夹下的文件,自动注入
const files = fs.readdirSync(path.resolve(__dirname, '../dll'))
files.forEach((file) => {
    if(/.*\.dll.js/.test(file)) {
        plugins.push(new AddAssetHtmlWebpackPlugin({ filepath: path.resolve(__dirname,'../dll',file) }))// 将需要导入html的文件导入html
    }
    if(/.*\.manifest.json/.test(file)) {
        plugins.push(new webpack.DllReferencePlugin({ 
            manifest: path.resolve(__dirname, '../dll',file)
        }))// 分析库的映射，当打包的时候有引用到库里面的文件时，不用重新打包，这样可以提升打包的速度
    }
})

module.exports = {
    mode: 'production',
    name: 'webpack设置页面名称',
    entry:{
        main: './src/index.js'
    },
    output:{
        filename:'[name].[hash].js',
        path: path.resolve(__dirname, '../dist')
    },
    devServer:{
        contentBase: './dist',
        open: true,
        port: 8090
    },
    performance: false,
    plugins,
    resolve:{ // 配置模块如何被解析，能够提高webpack的打包速度
        alias: { // 配置别名，更容易引入
            child: path.resolve(__dirname, '../src/child')
        },
        extensions: ['.js','.jsx'] // 在打包编译时，优先查找和处理以js或jsx结尾的文件
    },
    optimization: {
        usedExports: true,
        splitChunks:{
            chunks: 'all'
        }
    },
    module:{
        rules:[
            {test:/\.js$/,exclude:[/node_modules/,/dll/],loader:'babel-loader'}
        ]
    }
}

4、控制包文件大小

5、利用 thread-loader,parallel-webpack,happypack进行多进程打包

6、合理的sourceMap

7、结合stats分析打包结果

8、开发环境内存下编译

9、开发环境无用的插件剔除