webpack优化.md

no-parse

no-parse针对某些不需要处理的第三方模块，不进行解析,例如针对jquery

noParse: /jquery/

ignorePlugin

针对第三方模块中的依赖文件，比如moment中的多语言支持，打包时会引入所有语言，此时我们可以在打包时忽略掉

new webpack.InnorePlugin(/\.\/locale/,/moment/)

{
test: /\.js$/,
exclude: /node_modules/,
include: path.resolve('src')  ,
}

dllPlugin

首先说说，为什么要使用dllplugin？
在项目开发中，我们会遇到很多的依赖，体积不小，而且他们都是公共模块，基本上不会有变动，所以考虑是不是可以把这部分公共的模块抽取出来，作为静态的资源，不需要每次都打包这块
虽然有CommonsChunkPlugin插件可以抽取公共模块，但是有如下缺点

每次打包都会重新构建公共模块
只要其中的模块有微小的变动，打包出来的公共文件就不一样，简单说，换台机器，同样是vendor.js，但是文件的内容是不一样的，每次发布，会增加cdn服务器的压力
于是dllplugin横空出世，它可以抽取你想要分离的公共模块生成一个js文件，然后在以后的开发和打包的过程中，都可以直接用预先编译好的js文件，也就是说，公共的依赖，不会每次都打包

使用DLLPlugin打包需要分离到动态库的模块

DllPlugin是webpack内置的插件，不需要额外安装，直接配置webpack.dll.config.js文件：

module.exports = {
entry: {
  react: ['react','react-dom','react-redux']}
output: {
filename: '[name].dell.js',
path: path.resolve('dist/dll'),
// library必须和后面dllplugin中的name一致
library:'[name]_dll_[hash]'
}
plugins: [
  new webpack.DllPlugin({
    name: '[name]_dll_[hash]',
    path: path.join(__dirname,'dist/dll','[name].manifest.json')
  })
]

}

2. 在主构建配置文件使用动态库文件 ***

在webpack.config中使用dll要用到DllReferencePlugin,这个插件通过引用 dll 的 manifest 文件来把依赖的名称映射到模块的 id 上，之后再在需要的时候通过内置的 webpack_require 函数来 require 他们

new webpack.DllReferencePlugin({
 context: __dirname,
manifest: require('./dist/dll/react.manifest.json')

3. 在入口文件引入dll文件。

生成的dll暴露出的是全局函数，因此还需要在入口文件里面引入对应的dll文件。

懒加载

懒加载使用import ,打包时生成一个引用文件和一个真实文件，触发操作时，从引用文件中加载真实文件

{
test: /\.js$/,
use: {
  loader: 'babel-loader',
  options: {
  presets: [
    '@babel/preset-env',
    '@babel/preset-react'
  ],
  plugins: [
    '@babel/plugin-syntax-dynamic-import'
  ]
  }
}
}