webpack优化的深入理解

module: {
 rules: [{
  test: /\.js$/,
  exclude: /node_modules/,
  loader: 'babel-loader"htmlcode">

externals : {
 vue : "Vue",
 vueRouter : "VueRouter",
 vueResource : "VueResource",
 vuex : "Vuex"
},
<script type="text/javascript" src="/UploadFiles/2021-04-02/vue.famliy.1.1.0.min.js">

上面的例子的将vue全家桶都配置在externals中，然后将压缩包合成一个js文件放在cdn上面，这样就不会在构建时将文件打包到bundle中，提升打包速度，同时cdn又可以做缓存，提高访问速度，美滋滋
DllPlugin


DllPlugin是用来干什么的呢？DllPlugin会将第三方包到一个单独文件，并且生成一个映射的json文件，打包的生成的文件就是一个依赖库，这个依赖不会随着你的业务代码改变而被重新打包，只有当它自身依赖的包发生变化时才会需要重新打包依赖库，接下来来看具体配置吧：


module.exports = {
 entry: {
 vendor: ['vue', 'vue-router', 'vue-resource', 'vuex']
 },
 output: {
 path: path.join(__dirname, 'dist'),
 filename: '[name].js',
 library: '[name]_hash',
 },
 plugins: [
 new webpack.DllPlugin({
  name: '[name]_[hash]',
  path: path.join(__dirname, 'dist', '[name]-manifest.json'),
  context: __dirname
 })
 ]
}


首先我们需要一个如上面例子那样的dll配置文件，然后编译这个配置文件，生成一个vendor.js和一个映射文件vendor-manifest.json，然后再在我们的webpack配置文件中对进行配置：


plugins: [
 new webpack.DllReferencePlugin({
  context: __dirname,
  manifest: require('./dist/vendor-manifest.json')
 })
 ]


这样就完成配置了，是不是很简单呢？赶紧动手试试吧
happypack


happypack这是个什么呢？我们都知道webpack是个单线程处理任务的，当又多个任务需要处理的时候，需要排队，那happypack就是用多线程来处理任务，通过并发处理来提高任务处理速度，那么这个需要怎么配置呢？来看具体例子：


const happypack = require('happypack')
// 创建并发池
const threadPool = happypack.ThreadPool({size: os.cpus().length})
module: {
 rules: [{
  test: /\.js$/,
  exclude: /node_modules/,
  loader: 'happypack/loader"color: #ff0000">减小构建体积


webpack-bundle-analyzer


这个相信大家都很熟悉，就是一个可视化工具，用来查看各个包的大小以及相互之间的依赖关系，配置方法也很简单，就和插件的配置一样，来看具体例子：


const bundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
plugins: [
 new bundleAnalyzerPlugin()
 ],


tree shaking


tree shaking指的是什么呢？通常指的是JavaScript上下文中未引用的代码，怎么理解呢？比如你引用了lodash包，里面有许多和JavaScript相关的便利方法，但你实际只用了其中的一两个，此时打包时如果把所有的方法都打进去了，是不是很浪费呢？tree shaking的概念就是去除多余代码。来看一个简单的例子：


import {plus} from './count'

console.log(plus(1, 2))




function plus(x, y) {
 return x + y
}
function minus(x, y) {
 return x - y
}
export {
 plus,
 minus
}




const path = require('path')

module.exports = {
 entry: {
 main: './src/index.js',
 },
 output: {
 path: path.join(__dirname, 'dist'),
 filename: '[name].js',
 },
 mode: 'development'
}


如上例所示，在入口文件中我们引入count.js中plus方法，我们期望的当然是只会引入plus方法，而不是都引入，但往往不随人愿，来看结果：



  
    
      

      
    
  


你会发现编译后的代码中，整个count.js都被编译进去了，这时候你就需要tree shaking了，接下来看做tree shaking的具体方法
UglifyJsPlugin


这个插件大家一定都用过，使用UglifyJsPlugin就可以在构建的过程中对冗余的代码进行删除，在webpack4中只需要将上面mode的值改为production，就会启用UglifyJsPlugin，是不是很简单，或许你想知道webpack4中怎么自己配置UglifyJsPlugin，那就来看具体配置吧：


const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
optimization: {
 minimizer: [
  new UglifyJsPlugin({
  parallel: true,
  cache: true,
  uglifyOptions: {
   compress: {
   drop_console: true,
   reduce_vars: true
   },
   output: {
   comments: false,
   beautify: false
   }
  }
  })
 ]
 }


是的在webpack4中的UglifyJsPlugin是配置在optimization中的minimizer中的，配置是不很简单呢？赶紧动手尝试吧
按需加载(import)


这里的import是指webpack中的动态加载，它的语法和ES6中的动态加载语法一摸一样，这是官方推荐的按需加载的方式，还是上面tree shaking的例子，我们只想引入plus方法，我们来看具体怎么使用：


import('./count.js').then((count) => {
 console.log(count.plus(1, 2))
})


我们只需要将入口文件改成上面的形式，其他的都不要变就可以实现按需引入，是不是很简单呢？在vue中路由的按需加载也可以这么用，来看一个简单的例子：


function view (name) {
 return new Promise((resolve, reject) => {
 import('../views/' + name + '.vue')
  .then((res) => {
  resolve(res)
  }).catch(e => {
  reject('网络异常，请稍后再试')
  })
 }).catch(err => {
 throw new Error('err，组件加载失败')
 })
}


传入一个名字，动态引入对应目录的下的视图文件，这只是一个简单的例子，具体的使用形式还是依据具体的场景
总结


这篇文章简单的从构建速度和代码体积两个方面简单的介绍了webpack优化相关的方法，希望大家都能自己动手去写一写，毕竟只有实践出真知，更何况是编程。
好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对的支持。

        

            
上一篇：发布Angular应用至生产环境的方法
            
下一篇：BootStrap模态框闪退问题实例代码详解