(一) Tree shaking

https://www.webpackjs.com/guides/tree-shaking/
使用tree shaking 可以将没有使用的模块、方法、文件不进行打包，但是tree shaking只支持ES Module 引入的方式 (module.exports import from)

在webpack.config.js文件中进行配置
https://webpack.docschina.org/configuration/optimization/
在package.json中进行设置
如果一些文件即使没有使用，也希望引入，可以在使用：sideEffects:[‘文件名称’]来进行设置。如不对所有的css文件进行tree shaking可以设置：sideEffects:[’*.css’]
下面的设置是对所有模块进行tree shaking
打包后的文件，这是因为在开发环境下不会真正的删除掉文件中的方法，当将webpack.json.js文件中设置环境为生产环境时(mode:‘production’)tree shaking就会生效，当然也需要将配置文件中的optimization选项给删除掉

(二) develoment 和 production 模式的打包区别

可以针对不同的开发模式设置不同的配置文件
在package.json文件中使用不同的配置文件生成不同的包
在开发环境下使用devServer创建一个本地的服务器进行调试代码
```
npm run start
```
使用 npm run build 来打包开发环境下的包
可以将生产和开发的配置文件的相同部分放进一个单独的文件中，这时需要安装webpack-merge模块
```
npm install webpack-merge --save-dev
```
提取出来的webpack.common.js文件如下
将开发环境配置webpack.dev.js文件和公共部分配置进行合并，生产环境配置同理

(三) code splitting 和splitchunksplugin

https://www.webpackjs.com/guides/code-splitting/
https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import
https://www.webpackjs.com/plugins/split-chunks-plugin/
如果只有一个js入口文件，那么打包后，所有的引入的js文件和业务代码，都将放入一个打包文件中，这样最后生成的打包文件将会十分巨大，加载将十分缓慢。

在webpack.json.js文件中进行同步代码分割配置，异步代码分割无需配置。

安装splitchunksPlugin

npm install --save-dev @babel/plugin-syntax-dynamic-import

在babel的配置中进行如下配置：

下面的是异步加载lodash组件，如果希望加载的组件的名称还叫lodash就需要使用webpackChunkName

function getComponent(){
      
      
    return import(/* webpackChunkName:"lodash" */ 'lodash').then(({
      
      default: _})=>{
      
      
        var element = document.createElement('div');
        element.innerHtml = _.join(['张', '三'], '-');
        return element;
    })
}

getComponent().then(element =>{
      
      
    document.body.appendChild(element)
})

splitchunksplugin的默认配置

splitChunks: {
    
    
    chunks: "async",//只对异步代码分割，值为all表示对同步异步代码分割
    minSize: 30000,//引入的包/模块/库大于30kb时才进行代码的分割
    minChunks: 1,//包/模块/库至少要引入1此才进行分割
    maxAsyncRequests: 5,//同时最多加载5个模块
    maxInitialRequests: 3,//入口文件引入的库最多只做三次分割
    automaticNameDelimiter: '~',//文件名中间的连接符
    name: true,//使cacheGroups生效
    cacheGroups: {
    
    
        vendors: {
    
    //如果文件是从node_modules中引入的，则生成的文件以vendors~开头，如果希望将所有从node_modules中引入的文件打包到一个文件中可以添加filename: '文件名'选项
            test: /[\\/]node_modules[\\/]/,
            priority: -10 //优先级
        },
    	default: {
    
    
            minChunks: 2,
            priority: -20,
            reuseExistingChunk: true,//如果一个包已经被打包过，如果又被引入，则忽略该包
            //filename: 'common.js' //默认打包到common.js文件中
        }
    }
}

(四) 打包分析

www.github.com/webpack/analyse

在package.json文件中进行配置，将打包描述放入stats.json文件中
使用http://webpack.github.com/analyse网站对stats.json文件进行分析
使用其他方式
https://www.webpackjs.com/guides/code-splitting/#bundle-%E5%88%86%E6%9E%90-bundle-analysis-

(五) css文件分割/压缩

https://webpack.js.org/plugins/mini-css-extract-plugin/

安装

npm install --save-dev mini-css-extract-plugin

在配置文件中引入该插件

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

配置文件中配置该插件
如果没有生成css文件，则要将package.json文件中的"sideEffects": false,选项改为"sideEffects": ["*.css"],并在webpack.config.js配置文件中添加
5. 压缩css
1). 安装 optimize-css-assets-webpack-plugin
2). 在配置文件webpack.json.js中引入该插件,并配置

(六) shimming

https://www.webpackjs.com/guides/shimming/

比如：在入口文件中引入jquery文件，入口文件又引入另一个style.js文件，在style.js文件中也希望使用jquery文件，此时就需要在style.js文件中引入jquery但是当全局都希望引入jquery时，这样会很不方便。

在webpack.config.js文件中引入shimming

3. tree shaking、code splitting、splitchunksplugin、shimming等