1.减少Webpack打包时间1.优化Loader对于Loader，Babel首当其冲影响打包效率。因为Babel会把代码转成字符串生成AST，然后继续对AST进行改造，最后生成新的代码，项目越大，转换的代码越多，效率越低。当然，我们有办法优化1.1首先，我们可以优化Loader的文件搜索范围module.exports={module:{rules:[{//babelisonlyusedforjsfilestest:/\.js$/,loader:'babel-loader',//只在src文件夹中搜索include:[resolve('src')],//不会搜索的路径exclude:/node_modules/}]}}1.2当然这个还不够，我们还可以缓存Babel编译出来的文件，下次只需要编译变化的代码文件，这样可以大大加快打包时间loader:'babel-loader?cacheDirectory=true'2.HappyPack受限由于Node是单线程的，所以Webpack在打包过程中也是单线程的，尤其是在执行Loader的时候，有很多长时间的编译任务，会导致等待。HappyPack可以将Loader的同步执行转为并行，从而充分利用系统资源，加快打包效率module:{loaders:[{test:/\.js$/,include:[resolve('src')],exclude:/node_modules/,//id后面的内容对应下面的loader:'happypack/loader?id=happybabel'}]},plugins:[newHappyPack({id:'happybabel',loaders:['babel-loader?cacheDirectory'],//开启4个线程threads:4})]3.DllPluginDllPlugin可以预先封装一个特定的类库并导入。这种方法可以大大减少打包类库的次数。只有当类库更新时，才需要重新打包，同时也实现了将公共代码分离到单独文件中的优化方案。接下来我们学习如何使用DllPlugin//单独配置在一个文件中//webpack.dll.conf.jsconstpath=require('path')constwebpack=require('webpack')module.exports={entry:{//要统一打包的类库vendor:['react']},output:{path:path.join(__dirname,'dist'),filename:'[name].dll.js',library:'[name]-[hash]'},plugins:[newwebpack.DllPlugin({//name必须和output.libraryname:'[name]-[hash]',//这个属性必须和DllReferencePlugin一致context:__dirname,path:path.join(__dirname,'dist','[name]-manifest.json')})]}然后我们需要执行这个配置文件来生成依赖文件，然后我们需要使用DllReferencePlugin将依赖文件导入项目中//webpack.conf.jsmodule.exports={//...省略其他配置插件:[newwebpack.DllReferencePlugin({context:__dirname,//manifest为之前打包的json文件manifest:require('./分发/销售or-manifest.json'),})]}4.代码压缩在Webpack3中，我们一般使用UglifyJS来压缩代码，但这是单线程操作，为了加快效率，我们可以使用webpack-parallel-uglify-plugin并行运行UglifyJS以提高效率。在Webpack4中，我们不需要以上操作，只需将mode设置为production即可默认开启以上功能。代码压缩也是我们必须要做的性能优化方案。当然，我们不仅可以压缩JS代码，还可以压缩HTML和CSS代码，并且在压缩JS代码的过程中，我们还可以通过配置函数实现删除console.log等。5.一些小的优化点resolve.extensions：用来表示文件后缀列表，默认搜索顺序是['.js','.json']，如果你导入的文件没有加后缀，它会搜索文件按照这个顺序。我们应该尽可能地减少后缀列表的长度，然后将使用频率高的后缀放在前面。resolve.alias：可以通过别名来映射路径，让Webpack更快的找到路径。如果没有其他依赖，你可以使用这个属性来阻止Webpack扫描文件。这种方法对大型类库很有帮助。二、减小Webpack打包后的文件大小1、按需加载当你在开发SPA项目的时候，肯定项目中会有十几个甚至更多的路由页面。如果我们把这些页面都打包成一个JS文件，虽然合并了多个请求，但是也加载了很多不必要的代码，耗时较长。所以为了更快的将首页呈现给用户，我们当然希望首页能够加载的文件体积越小越好。这时候我们可以使用按需加载，将每个路由页面单独打包成一个文件。当然不仅路由可以按需加载，这个功能也可以用于loadash等大型类库。按需加载的代码实现这里就不详细展开了，因为使用的框架不同，实现也不一样。当然，虽然它们的用法可能不同，但底层机制是相同的。使用时，下载对应的文件，返回一个Promise，Promise成功时执行回调。2.ScopeHoistingScopeHoisting会分析模块之间的依赖关系，尽可能将打包后的模块合并为一个函数。例如，我们要打包两个文件//test.jsexportconsta=1//index.jsimport{a}from'./test.js'在这种情况下，我们打包的代码将如下所示[/*0*/function(module,exports,require){//...},/*1*/function(module,exports,require){//...}]但是如果我们使用范围提升，代码将是可能会合并成一个函数，变成这样类似的代码[/*0*/function(module,exports,require){//...}]这种封装方式生成的代码明显比之前多了很多较少的。如果你想在Webpack4中启用此功能，只需启用optimization.concatenateModules。module.exports={optimization:{concatenateModules:true}}3.TreeShakingTreeShaking可以删除项目中未引用的代码，例如//test.jsexportconsta=1exportconstb=2//index.jsimport{a}from'./test.js'针对以上情况，如果项目中没有使用test文件中的变量b，则不会打包到文件中。如果你使用Webpack4，启动生产环境会自动开启这个优化功能。
