webpack 如何压缩项目体积提交首页渲染速度？

最新推荐文章于 2022-10-14 10:11:25 发布

sleeppingfrog

最新推荐文章于 2022-10-14 10:11:25 发布

阅读量653

点赞数 1

分类专栏： vue iview webpack

本文链接：https://blog.csdn.net/baidu_41601048/article/details/83505491

版权

vue 同时被 3 个专栏收录

57 篇文章 2 订阅

订阅专栏

webpack

5 篇文章 0 订阅

订阅专栏

iview

3 篇文章 0 订阅

订阅专栏

单页面应用首屏渲染加载速度很慢。如何压缩项目体积减少从而实现更快的实现首屏响应速度？

今天要实现的办法就是提供cdn+webpakck来实现。实例以我自己的项目为例。

第一步：

在build文件夹下找到webpack.base.config.js文件。添加externals属性：

代码如下：

module.exports = {

context: path.resolve(__dirname, '../'),

entry: {

app: ['babel-polyfill','./src/main.js']

output: {

...

resolve: {

extensions: ['.js', '.vue', '.json'],

alias: {

'vue$': 'vue/dist/vue.esm.js',

'@': resolve('src'),

}

externals:{

"vue":"Vue",

"vuex":"Vuex",

"vue-router":"VueRouter",

"axios":"axios",

"echarts":"echarts",

"iview":"iview"

module: {

......

extral实际上表示在打包的时候把相关的项目文件排除。例子中extral的配置表示打包的时候排除vue，vuex,vue-router,axios,echarts，iveiw。这样文件体积一下子会减小很多

}

2 main.js入口文件作如下修改：

import App from './App'

import router from './router' 文件路径正常引入

import store from "./store/store.js" 文件路径正常引入

import "iview/dist/styles/iview.css" css路径正常引入

new Vue({

el: '#app',

router,

store,

components: { App },

template: '<App/>'

})

注意：main.js作了很多的修改。除了css和文件的正常引入（比如app.vue和router.js文件等）以外。包括vue和Vue.use(vueRoute)等其他代码全部要删掉。

3 router文件夹下的router配置不做任何改变。

import Vue from 'vue'

import Router from 'vue-router'

const Login=r=>require.ensure([],()=>r(require('../components/Login.vue')),'Login')

const Sidebar=r=>require.ensure([],()=>r(require('../components/Sidebar.vue')),'Sidebar')

Vue.use(Router)

const router= new Router({
routes: [
{
path: '/',
name:"login",
component:Login
},
{
path: '/sidebar',
name: 'sidebar',
component: Sidebar
},

]
})

export default router

4 首页index.html页面需要引入externals排除掉的所有文件的cdn地址。需要注意的是尽量把cdn地址引入到head中。因为打包以后的script标签会被插入到body中，避免遇到解析作用域问题

修改如下：

<style>

body,html{background: rgb(239, 243, 246)}

</style>

<title>如见后台管理系统</title>

</head>

<body>

</body>

通过cdn+webpakc的externals项目由打包之前的12m一下变成了4m。效果明显

我的项目采用的是iview,通过这种方案虽然解决了打包文件体积变小的目的，但是存在一个问题：

项目中原本table的筛选功能icon无法显示。筛选菜单无法显示。经排查发现问题的原因出现在main.js文件中引入的iview的css样式

import App from './App'

import router from './router' 文件路径正常引入

import store from "./store/store.js" 文件路径正常引入

import "iview/dist/styles/iview.css" css路径正常引入

new Vue({

el: '#app',

router,

store,

components: { App },

template: '<App/>'

})

解决的办法，把iview的样式在index.html页面中通过link标签导入。把main.js中import "iview/dist/styles/iview.css" 去掉。

最后的代码如下：

------------------------------------------------------------------------------------------

main.js

import App from './App'
import router from './router'
import store from "./store/store.js"

Vue.config.productionTip = false;

new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})

------------------------------------------------------------------------------------------

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.bootcss.com/iview/3.0.1-rc.1/styles/iview.css">
<style>

body,html{background: rgb(239, 243, 246)}

</style>
<title>如见后台管理系统</title>
<script src="https://cdn.bootcss.com/vue/2.5.17/vue.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.0/vue-router.js"></script>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.2.0-rc.1/echarts-en.common.js"></script>
<script src="https://cdn.bootcss.com/iview/3.0.1-rc.1/iview.js"></script>

</head>
<body>
<div id="app"></div>

</body>
</html>

至此问题解决

sleeppingfrog

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack 如何压缩项目体积提交首页渲染速度？

单页面应用首屏渲染加载速度很慢。如何压缩项目体积减少从而实现更快的实现首屏响应速度？今天要实现的办法就是提供cdn+webpakck来实现。实例以我自己的项目为例。第一步：在build文件夹下找到webpack.base.config.js文件。添加externals属性：代码如下： module.exports = { context: path.resolv...
复制链接

扫一扫

专栏目录