webpack提升打包速度

提升webpack打包速度的方法(1)
      1.跟上技术迭代（node、npm 、yarn）更新到最新版本。（人家会优化内部）
      2.在尽可能少的模块上应用Loader 
      3.Plugin尽可能精简并确保可靠 （尽可能少的使用）

resolve参数合理配置
      打开.babelrc文件，
      如果配置有“@babel/preset-react”,就可以在组件中写react代码。
      如果我们用   .jsx  引入之后我们需要配置。
      
     

 rules:[
             //把test中的/\.js$/,改成 /\.jsx?$/ 意思是不管后缀有没有x都会用babel-loader进行打包。
            test:/\.js$/,
             include:path.resolve(__dirname,"../src"),
             use:[{
                     loader:"babel-loader"
              }]
            ]

当引入其他的文件时。
      //添加配置项，在webpack.common.js中。
   

resolve:{
           extensions:['.js','.jsx']//意思是引入文件时，我们只用文件名，就会先找后缀是 js 的文件，然后没有的话再找后缀是 jsx 的文件。（耗费性能）
       }

     //如果我们只用到文件夹，而文件夹中的文件不一定是index文件，那就需要配置
     

resolve:{
           extensions:['.js','.jsx']，
           mainFiles:['index','child']//意思是当我们引入一个文件夹时，先查找文件夹中是否有index开头的文件，如果没有就查找是否有child开头的文件。（耗费性能）
       }

     //当我们想为一个引入的文件起一个别名的话
     

resolve:{
           extensions:['.js','.jsx']，
           mainFiles:['index','child']，
           alias:{
               //当看到delllee的时候，它会去找src目录下的child。
                delllee:path.resolve(__dirname,"../src/child")
           }
       }

使用 DllPlugin 提高打包速度
       引入第三方模块时，每次打包都会重新分析。第三方模块其实代码是不会边的，所以在第一次打包时候解析，
       webpack.dll.js
         

const path=require("path")
       module.export={
              mode:"production",
             entry:{
                       venfors:['react','react-dom','lodash']
               },
              output:{
                      filename:'[name].dll.js',
                      path:path.resolve(__dirname,'../dll'),
                      library:'[name]'//通过全局变量暴露出来
                }
         }

//往htmlplugin上添加新的插件
   

npm i add-asset-html-webpcak-plugin --save

在webpack.common.js中引入使用
 

 const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpcak-plugin')

   
 //在plugins中添加
   

plugins:[
     new AddAssetHtmlWebpackPlugin({
          filename:path.resolve(__dirname,"../dll/vendors.dll.js")
         })
    ]

     package.json中添加
     

"scripts":{
            //添加
            "build:dll":"webpack --config ./build/webpack.dll.js"
        }

     //运行 npm run build:dll
单独对第三方文件进行打包，希望第三方模块只打包一次

如何让文件使用只打包一次的第三方模块
  
需要做一个映射
webpack.dll.js中引入webpack
const webpack = require("webpack");
//添加配置
   

plugins:[
           new webpack .DllPlugin({
                name:'[name]',
                path:path.resolve(__dirname,"../dll/[name]/.manifest.json"),
           })
    ]

//npm run build:dll
生成一个 vendors.manifest.json文件
为了使用打包好的vendors.manifest.json文件，需要再添加一个配置
   

 plugins:[
            new webpack.DllReferencePlugin({
               manifest:path.resolve(__dirname,"../dll/vendors.manifest.json"),
            })
      ]

//当我们打包的时候，会在文件中找映射关系，如果找到了，就没必要再引入，只需要在全局变量中去拿，第三方打包好的模块，如果没有就回去node_modules中去拿模块。
//npm run build