vue dll打包_几个前端小技巧，让你的vue项目体积更小点，打包速度更快点

前言

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

让项目体积更小点

压缩打包的文件

包安装

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

推荐生产环境使用

忽略 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-lineconst 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())  }}

让项目打包更快

删除 prefetch、preload

webapack配置

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

看自己项目情况/需求使用

开启多线程打包(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') })      )  }}

结尾 需要这些资料，可以私信 666 领取