最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • 让你的vue项目体积更小点,打包速度更快点

    正文概述 掘金(时樾同学)   2021-01-20   799

    前言

    让项目体积更小点

    压缩打包的文件

    包安装

    npm i compression-webpack-plugin@5.0.0 -D / cnpm i compression-webpack-plugin@5.0.0 -D /yarn add compression-webpack-plugin@5.0.0
    

    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

    webapack配置

    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') })
          )
      }
    }
    

    end

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


    起源地下载网 » 让你的vue项目体积更小点,打包速度更快点

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元