webpack 相关优化

打包速度优化

1.更新我们的node或者npm 或者 webpack

2.尽可能的减少laoder的转换（合理使用exclude和include）

3.Plugin(尽量使用官方提供的插件)

4.使用DllPlugin提高打包速度

打包过的代码（如第三方库）再此打包的时候不会把这些代码再次打包。
1.创建webpack.dll.js

将打包好的库的接口通过全局变量导出。全局变量的名称为entry对象的属性名。
2.在package.json中配置脚本"dll" :"webpack --config webpack.dll.js"
运行npm run dll然后再次运行打包指令。这次打开dist下的html文件全局变量venders就被导出了。
下载npm i --save add-asset-html-webpack-plugin通过这个插件可以把打包好的文件所引出的全局变量自动引入到html文件中。
上面的代码会在html文件中自动引入"./dll/venders.dll.js"文件。
现在还需要建立一个映射关系，才能让引入的代码不会重复打包。
在webpack.dll.js中：

我们需要通过映射的文件(./dll/[name].mainfest.json)查找要打包的代码是否在vender.dll.js中，如果在则不会再次打包。
所以，我们需要在文件打包时能先找到映射文件，需要在webpack.config.js
中进行配置：
通过webpack内置的插件DllReferencePlugin建立打包时的映射。

如果我们需要将不同的库打包成不同的文件，在webpack.dll.js文件中可以配置多入口。
在webpack.config.js中需要动态获取到dll文件下打包的文件名，然后动态生成配置选项。

项目优化

1.代码分割()

• 入口起点：使用entry配置手动的分离代码。

如果将不同的文件内引入相同的库会分别打包到不同的文件中。

• 动态导入：通过模块的；懒加载调用来分离代码。

动态导入的好处是实现了懒加载，用到哪个模块就加载哪个模块。
需要babel插件的支持：“@babel/plugin-syntax-dynamic-import”
1.下载：npm install -D @babel/plugin-syntax-dynamic-import
2.配置:
3.使用：

可以通过添加魔法注释来修改打包之后的文件名,可以对上面的代码作出修改：

function getComponent() {	
	return important(/* webpackChunkName:"jquery"*/"jquery")
}

• 防止重复：使用SplitChunksPlugin去重分离chunk

配置：

修改上面的代码可以去掉打包后的文件名的前缀：

   optimization:{                               
     splitChunks:{            
     	chunks:"all" ,
     	cacheGroups:{
     		venders:false,
     		default:false,
     	}      
     }           
  }

关于splitChunksPlugin的配置说明：

2.预加载

在网络空闲的时候或者在首页的核心代码执行完成后，自己再偷偷加载相应的js代码，即预加载。
webpack通过异步引入文件的方式来实现预加载。
main.js

使用注释魔法来实现预加载。

app.js