webpack优化.md
2019-07-07 本文已影响0人
时修七年
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')
})
]
}
- 在主构建配置文件使用动态库文件 ***
在webpack.config中使用dll要用到DllReferencePlugin,这个插件通过引用 dll 的 manifest 文件来把依赖的名称映射到模块的 id 上，之后再在需要的时候通过内置的 webpack_require 函数来 require 他们
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./dist/dll/react.manifest.json')
- 在入口文件引入dll文件。
生成的dll暴露出的是全局函数，因此还需要在入口文件里面引入对应的dll文件。
<body>
<div id="app"></div>
<!--引用dll文件-->
<script src="../../dist/dll/react.dll.js" ></script>
</body>
懒加载
懒加载使用import ,打包时生成一个引用文件和一个真实文件，触发操作时，从引用文件中加载真实文件
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-env',
'@babel/preset-react'
],
plugins: [
'@babel/plugin-syntax-dynamic-import'
]
}
}
}
