如何使vue项目体积更小打包速度更快呢

有时候开发完一个vue项目后,会发现项目包又大打包速度还慢,里面还有很多冗余的文件,比如图片,.vue文件,.js文件等,如果你也遇到类似问题,或者你希望你的项目包更小点,打包速度更快点,本文也许对你有所帮助。

让项目体积更小点

压缩打包的文件

包安装

npm i [email protected] -D
cnpm i [email protected] -D
yarn add [email protected]

webapack配置

module.exports = {
  ...
  chainWebpack:config => {
    config.plugin('compression')
      .use(
      new CompressionWebpackPlugin(
        {
          filename: info => {
            return `${info.path}.gz${info.query}`
          },
          algorithm: 'gzip',
          threshold: 10240, 
          test: /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i,
          minRatio: 0.8, 
          deleteOriginalAssets: true 
        }
      )
    )
  }
}

推荐在生产环境使用

删除多余的文件

包安装

npm i useless-files-webpack-plugin -D
cnpm i useless-files-webpack-plugin -D
yarn add useless-files-webpack-plugin

webapack配置

module.exports = {
  ...
  chainWebpack = config => {
    config.plugin('uselessFile')
      .use(
        new UselessFile({
          root: path.resolve(__dirname,'./src/assets/images'), 
          clean:true,
          exclude: /node_modules/
      })
    )
  }
}

推荐生产环境使用

删除 prefetch、preload

webpack配置

module.exports = {
  ...
  chainWebpack: config =>{
    config.plugins.delete('prefetch')
    config.plugins.delete('preload')
  }
}

忽略 moment 本地化

webpack配置

module.exports = {
  ...
  chainWebpack : config=>{
    config.plugin('IgnorePlugin')
      .use(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/))
  }
}

按需加载Element

Babel.config.js

module.exports = {
  ...
  plugins:[
    [
      "component",
      {
        libraryName: "element-ui",
        styleLibraryName: "theme-chalk"
      }
    ]
  ]
}

按需导入组件

import Vue from 'vue'
import { Dialog } from 'element-ui'
Vue.use(Dialog)

按需加载Echart

Babel.config.js

module.exports = {
  ...
  plugins:[
   ...
   'equire'
  ]
}

按需使用echart

// eslint-disable-next-line
const echarts = equire([
  "line",
  "bar"
])
export default echarts

按需加载loadsh

Babel.config.js

module.exports = {
  ...
  plugins:[
   ...
   'lodash'
  ]
}

webpack配置

module.exports = {
  ...
  chainWebpack: config =>{
    ...
    config.plugin('loadshReplace')
      .use(new LodashModuleReplacementPlugin())
  }
}

让项目打包更快

开启多线程打包(HappyPack)

包安装

npm i happypack -D
cnpm i happypack -D
yarn add happypack

webpack配置

const HappyPack = require('happypack')
const os = require('os')
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length })
module.exports = {
  ...
  chainWebpack: config =>{
    ...
    const jsRule = config.module.rule('js')
      jsRule.uses.clear()
      jsRule.use('happypack/loader?id=babel')
          .loader('happypack/loader?id=babel')
          .end()
    config.plugins.push(
      new HappyPack({
        id:'babel',
        loaders:['babel-loader?cacheDirectory=true'],
        threadPool:happyThreadPool
      })
    )
  }
}

动态链打包

webpack.dll.config

const webpack = require('webpack')
const path = require('path')

module.exports = {
  entry: {
    vendor: ['vue', 'vue-router', 'axios', 'echarts','element-ui','moment','sortablejs'] // 第三方包
  },

  output: {
    filename: '[name].dll.js',
    path: path.resolve(__dirname, 'dll'),
    library:'[name]_lib'
  },

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

执行一下这个文件,拿到编译后的代码

webpack --config webpack.dll.config.js

webpack配置

module.exports = {
  ...
  configureWebpack: config => {
      config.plugins.push(
        new webpack.DllReferencePlugin({
          manifest: path.resolve(__dirname, 'dll/vendor-manifest.json')
        })
      )
      config.plugins.push(
        new AddAssetHtmlPlugin({ filepath: path.resolve(__dirname,'dll/vendor.dll.js') })
      )
  }
}

结语

以上就是码云笔记平时针对自己项目或者公司项目累积的一点vue项目打包优化知识,也许你有更好的优化点,或者更好的优化方案,欢迎提供案例,一起学习。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » 如何使vue项目体积更小打包速度更快呢

发表评论

提供最优质的资源集合

立即查看 了解详情