若依前端打包部署不使用nginx 前端打包配置

转载

IT剑客之家 2024-07-02 20:27:28

文章标签 若依前端打包部署不使用nginx 前端 javascript vue.js webpack 文章分类 运维

这里写自定义目录标题

项目技术栈
初始构建大小

引入辅助工具
优化一：cdn引入
优化二：按需引入
优化三：懒加载
优化四：压缩文件

项目技术栈

1.vue 2.6.10
2.vue/cli 4.5.15

初始构建大小

若依前端打包部署不使用nginx 前端打包配置_javascript

初始build的结果如上图所示，整个dist文件夹大小是49.7MB，从文件上可以看到，app.js、0.js、2.js、3.js文件夹非常大，这种时候就要找找原因了

引入辅助工具

既然要分析这些比较大的文件里面都有些什么，我们就引入一下分析包的工具，webpack-bundle-analyzer：

npm install --save-dev webpack-bundle-analyzer

接着在vue.config.js中要做一些配置

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports = {
	configureWebpack: (config) => {
		return {
			//...
			plugin: [
				new BundleAnalyzerPlugin({
		            analyzerPort: 8889, // 分析页面
		            openAnalyzer: false // 默认不打开分析模块页面
		        })
			]
			//...
		}
	}
}

配置好了，看看效果，执行一下编译打包的命令

npm run build

编译完成之后，打开浏览器，地址栏输入localhost:8889

若依前端打包部署不使用nginx 前端打包配置_javascript_02

从上图就很明显看到哪些文件占的大。好了，接下来做一些针对性的解决方法吧。

优化一：cdn引入

首先让我很耿耿于怀的就是这个ercharts，确实用的多，打包之后也很占空间，所以我决定用cdn来引入：

public/index.html

<script crossorigin="anonymous" src="https://lib.baomitu.com/echarts/5.2.1/echarts.min.js"></script>

其它版本你们自己移步到链接: echarts

配置vue.config.js

module.exports = {
	chainWebpack: config => {
	    // ...
	    var externals = {
	      'echarts': 'echarts',
	    }
	    config.externals(externals)
	    config.plugins.delete("prefetch") //配置可以取消首屏渲染时对组件js文件的预加载, 实现真正的按需加载
	},
	//...
}

使用方法

import * as echarts from 'echarts'

哪个页面需要用到，就按照上面的引入就行，也可以在main.js全局引入，这样就可以直接使用echarts.init()等方法了

重新打包看效果

我忘记截图了，你们可以自己看看效果哈，就echarts.js部分就没了，我这边是缩小了6MB

优化二：按需引入

按需引入的话，其实是编码习惯来的，有些项目为了方便，就在main.js中全局引用样式框架等，最后有没有用到其实也不知道，打包的时候还一起打包了，所以导致打包之后体积很大，在main.js中全局引用element-ui的童鞋看过来：

安装插件

npm install babel-plugin-component -D

配置babel.config.js

module.exports = {
  presets: [
    '@vue/app'
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

重新打包看效果

你们可以自己看看效果哈。

优化三：懒加载

经过前面两个步骤的优化之后我们会发现，虽然app.js是有变小，但是首屏加载整个app.js的时候，还是很慢，它还是很大，这种时候，我们应该去拆分它，使得每个页面只加载自己所需要的文件，就要用到懒加载啦！

先来看一段vue-router官网文字

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效

那就来试试：

router.js

const router = createRouter({
  // ...
  routes: [{ path: '/users/:id', component: () => import('./views/UserDetails')}],
})

接着我在vue.config.js中加一些配置，你们可配可不配，我就是为了打包之后js文件放在文件夹内

module.exports = {
	configureWebpack: (config) => {
		return {
			//...
			output: {
	          // 防止打包js不在js文件夹下,生成新的js名称防止缓存
	          filename: `js/[name].[hash].js`
	        },
			plugin: [
				new BundleAnalyzerPlugin({
		            analyzerPort: 8889, // 分析页面
		            openAnalyzer: false // 默认不打开分析模块页面
		        })
			]
			//...
		}
	}
}

打包看效果
打包之后发现js文件变多了，但是基本上体积都很小，部署之后也会发现速度快了很多，因为首屏需要加载的内容也不多，然后你会发现打包出来的很多js文件命名是0,1,2,3,4这种，你不知道对应那个页面的，这种时候，我们可以引入chunkFilename

修改一下router.js

const router = createRouter({
  // ...
  routes: [{ path: '/users/:id', component: () => import(/* webpackChunkName: "UserDetails" */'./views/UserDetails')}],
})

修改一下vue.config.js

output: {
	filename: `js/[name].[hash].js`,
	chunkFilename: `js/[name].[hash].js`
},

重新打包看效果

打包之后js文件命名就不是0,1,2…这种了，并且你会发现，同一个命名文件的页面，会打包到同一个js文件里面，看自己需求做哈，还有chunkname是可以动态设置的，有些项目的路由是遍历出来的，需要动态命名chunkname，有兴趣自己查一下哈

优化四：压缩文件

优化进行到这里，其实页面加载速度已经快了很多了，总体的文件还是比较大的，所以我们再搞一个压缩插件，引入compression-webpack-plugin

npm install compression-webpack-plugin -D

修改vue.config.js

const CompressionWebpackPlugin = require('compression-webpack-plugin')
module.exports = {
	configureWebpack: (config) => {
		return {
			//...
			new CompressionWebpackPlugin({
	            filename: '[path].gz[query]',
	            algorithm: 'gzip',
	            // test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
	            test: /\.js$|\.css$/,
	            threshold: 10240, // 只有大小大于该值的资源会被处理,当前配置为对于超过1k的数据进行处理，不足1k的可能会越压缩越大
	            minRatio: 0.99, // 只有压缩率小于这个值的资源才会被处理
	            deleteOriginalAssets: true // 删除原文件
	         }),
			output: {
	            // 防止打包js不在js文件夹下,生成新的js名称防止缓存
	            filename: `js/[name].[hash].js`,
	            chunkFilename: `js/[name].[hash].js`
	        },
			plugin: [
				new BundleAnalyzerPlugin({
		            analyzerPort: 8889, // 分析页面
		            openAnalyzer: false // 默认不打开分析模块页面
		        })
			]
			//...
		}
	}
}

重新打包看效果

js和css压缩之后体积更小了

若依前端打包部署不使用nginx 前端打包配置_vue.js_03