Webpack打包的通用优化细节

最新推荐文章于 2022-12-19 09:04:14 发布

丹丹呀～～

最新推荐文章于 2022-12-19 09:04:14 发布

阅读量438

点赞数 1

文章标签： vue.js javascript java

本文链接：https://blog.csdn.net/weixin_55690518/article/details/120040151

版权

Webpack打包优化的目的:

在保证功能可用的前提下，让我们的文件尽可能小
在保证功能可用的前提下，让我们的页面显示出来的速度更快一些

打包之后，会得到dist目录，如果希望可以双击打开index.html，则需要提前在vue.config.js中配置：vue.config.js中

{

publicPath: './'

}

1、打包优化-路由懒加载

什么是路由懒加载：懒加载的意思是：只有在路由进入这个页面时，才去加载这个组件对应的资源，一个路由对一个组件，表示一个页面

具体用法：在路由模块讲路由的写法改写一下

原始的路由配置写法

const Login = import('@/views/login/index')
{
path: '/login',
component: Login,
hidden: true
},

改写成路由懒加载的形式

{
path: '/login',
component: () => import('@/views/login/index'),
hidden: true
},

打包后的结果

这样的情况下我们打包后的js文件对应的是我们项目中的哪个文件，如果我们想知道打包后的文件对应的是那个文件可以使用路由懒加载中的魔法注释

components = () => import(/* webpackChunkName:"login"*/ "../component/Login.vue");

2、打包优化-包大小分析

我们可以使用vue-cli本身提供的性能分析工具，对我们开发的所有功能进行打包分析，它的使用非常简单

npm run preview -- --report

3、打包去掉console.log

在vue.config.js中，配置：

chainWebpack(config) {
config.optimization.minimizer('terser').tap((args) => {
args[0].terserOptions.compress.drop_console = true
return args
})
}

4、webpack配置排除打包-打包瘦身

例如:让 webpack 不打包 vue xlsx 和 element

使用方式

（1）先找到 vue.config.js，添加 externals 项，具体如下：

configureWebpack: {
// 配置单页应用程序的页面的标题
name: name,
externals: {
/**
* externals 对象属性解析。
* 基本格式：
* '包名' : '在项目中引入的名字'
*
*/
'vue': 'Vue',
'element-ui': 'ElementUI',
'xlsx': 'XLSX'
},
resolve: {
alias: {
'@': resolve('src')
}
}
}

（2）把排除在外的包，通过公共网络资源方式引入

具体配置-在生产环境时生效

请注意，在开发环境时，文件资源还是可以从本地node_modules中取出，而只有项目上线了，才需要去使用外部资源。此时我们可以使用 环境变量 来进行区分。具体如下：

在vue.config.js文件中：

let externals = {}
let cdn = { css: [], js: [] }
const isProduction = process.env.NODE_ENV === 'production' // 判断是否是生产环境
if (isProduction) {
externals = {
/**
* externals 对象属性解析：
* '包名' : '在项目中引入的名字'
*/
'vue': 'Vue',
'element-ui': 'ELEMENT',
'xlsx': 'XLSX'
}
cdn = {
css: [
'https://unpkg.com/element-ui/lib/theme-chalk/index.css' // element-ui css 样式表
],
js: [
// vue must at first!
'https://unpkg.com/vue@2.6.12/dist/vue.js', // vuejs
'https://unpkg.com/element-ui/lib/index.js', // element-ui js
'https://cdn.jsdelivr.net/npm/xlsx@0.16.6/dist/xlsx.full.min.js', // xlsx
]
}
}

webpack配置externals配置项

configureWebpack: {
// 配置单页应用程序的页面的标题
name: name,
+ externals: externals,
resolve: {
alias: {
'@': resolve('src')
}
}
}

注入CDN配置到html模板

之后通过 html-webpack-plugin 注入到 index.html 之中:

在vue.config.js中，设置

chainWebpack(config) {


// 注入cdn变量 (打包时会执行)
config.plugin('html').tap(args => {
args[0].cdn = cdn // 配置cdn给插件
return args
})

}

找到 public/index.html 通过配置CDN Config 依次注入 css 和 js。

修改head的内容如下：

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= webpackConfig.name %></title>

<!-- 引入样式 -->
<% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
<link rel="stylesheet" href="<%=css%>">
<% } %>


<!-- 引入JS -->
<% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%=js%>"></script>
<% } %>
</head>

丹丹呀～～

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Webpack打包的通用优化细节

Webpack打包优化的目的: 在保证功能可用的前提下，让我们的文件尽可能小在保证功能可用的前提下，让我们的页面显示出来的速度更快一些打包之后，会得到dist目录，如果希望可以双击打开index.html，则需要提前在vue.config.js中配置：vue.config.js中{publicPath: './'}1、打包优化-路由懒加载什么是路由懒加载：懒加载的意思是：只有在路由进入这个页面时，才去加载这个组件对应的资源，一个路由对一个组件，表示一个..
复制链接

扫一扫