webpack 机能提速

2023年2月28日 231次阅读 来源: 木子喵
  1. 按需援用 外部的组件按需援用

2.启用happypack多核构建项目

3.修正source-map设置

  1. 启用DllPlugin和DllReferencePlugin预编译库文件

1、按需援用
1.1险些一切的第三方组件框架都邑供应组件的按需援用体式格局，以iview为例，经由过程借助插件babel-plugin-import能够完成按需加载组件，削减文件体积，只需要修正.babelrc文件

npm install babel-plugin-import --save-dev

// .babelrc
{
  "plugins": [["import", {
    "libraryName": "iview",
    "libraryDirectory": "src/components"
  }]]
}

1.2然后如许按需引入组件，就能够减小体积了
import { Button } from 'iview'
Vue.component('Table', Table)

2、启用happypack多核构建项目
装置happypack后，修正/build/webpack.base.conf.js文件即可

npm install happypack --save-dev

// /build/webpack.base.conf.js
const HappyPack = require('happypack')
const os = require('os')
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length })
// 增添HappyPack插件
plugins: [
    new HappyPack({
      id: 'happy-babel-js',
      loaders: ['babel-loader?cacheDirectory=true'],
      threadPool: happyThreadPool,
    })
  ]
// 修正引入loader
{
    test: /\.js$/,
    // loader: 'babel-loader',
    loader: 'happypack/loader?id=happy-babel-js', // 增添新的HappyPack构建loader
    include: [resolve('src'), resolve('test')]
}

完成js缓存

webpack插件CommonsChunkPlugin的重要作用是抽取webpack项目进口chunk的大众部份，详细的用法就不做过量引见，不太相识能够参考webpack官网引见；

该插件是webpack项目经常运用的一个优化功用，险些在每一个webpack项目中都邑用到。运用该插件带来的优点：

提拔webpack打包速率和项目体积：将webpack进口的chunk文件中一切大众的代码提掏出来，削减代码体积；同时提拔webpack打包速率。

应用缓存机制：依靠的大众模块文件平常很少变动或许不会变动，如许自力模块文件提掏出能够历久缓存。

但是在项目中，若插件打开体式格局不准确的话，上面的第二点实际上是没法完成，由于这类情况下：

没有被修正过的公有代码或库代码打包出的Entry Chunk，会跟着其他营业代码的变化而变化，致使页面上的长缓存机制失效。

那末，下面就来开启CommonsChunkPlugin准确的打开体式格局。

    原文作者：木子喵
    原文地址: https://segmentfault.com/a/1190000017272243
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞