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