短视频软件代码，利用缓存能力提升加载速度

短视频软件代码，利用缓存能力提升加载速度
增加对应的缓存配置, 可以很好的提升构建和启动速度, 尤其是多次构建和启动(或热更新)的场景
cache-loader 与cache 配置
在webpack搭建的项目中,可以使用上述两个东西,改善构建速度

 

 

但是在vuecli创建的项目则不用
VueCli自带

cache-loader 会默认为 Vue/Babel/TypeScript 编译开启。文件会缓存在 node_modules/.cache 中。 如果你遇到了编译方面的问题，记得先清缓存目录之后再试试看。
thread-loader 会在多核 CPU 的机器上为 Babel/TypeScript 转译开启。

hard-source-webpack-plugin
这个插件主要是利用缓存,提升二次启动和二次打包的速度, 效果很直观
使用方式

// vue.config.js  在vuecli中
const HardSourcePlugin = require('hard-source-webpack-plugin')
module.exports = {
 configureWebpack: {
        plugins: [new HardSourcePlugin()]
    }
}

// webpack.config.js  在webpack搭建的项目中
const HardSourcePlugin = require('hard-source-webpack-plugin')
module.exports = {
   mode: 'development',
   ...
   plugins: [new HardSourcePlugin()]
}

开启babel缓存
只需要在babel-loader的配置里加一个参数即可：cacheDirectory: true

 {
   test: /.js$/,
   exclude: /node_modules/,
   loader: 'babel-loader',
   options: {
     presets: [
       [
         '@babel/preset-env',
         {
           useBuiltIns: 'usage',
           corejs: { version: 3 },
           targets: {
             chrome: '60',
             firefox: '50'
           }
         }
       ]
     ],
     // 开启babel缓存
     // 第二次构建时，会读取之前的缓存
     cacheDirectory: true
   }
 },

以上就是短视频软件代码，利用缓存能力提升加载速度， 更多内容欢迎关注之后的文章