欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue项目打包webpack体积优化

程序员文章站 2022-11-21 22:07:22
vue项目打包webpack体积优化 webpack有个插件webpack-bundle-analyzer,可以查看项目一共打了多少包,每个包的体积,每个包里面的包情况。 vue-cli 2.0已经...

vue项目打包webpack体积优化

webpack有个插件webpack-bundle-analyzer,可以查看项目一共打了多少包,每个包的体积,每个包里面的包情况。

vue-cli 2.0已经集成好了这个插件的配置

我们只需在package.json中添加命令

"scripts": {

"analyz": "cross-env node_env=production npm_config_report=true npm run build"

}

这样即可查看包大小了。

二、路由懒加载

把不同路由对应的分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了.

const foo = () => import('./foo.vue')

const router = new vuerouter({

routes: [

{ path: '/foo', component: foo }

]

})

三、异步组件

在大型应用中,我们可能需要将应用分割成小一些的代码块,并且只在需要的时候才从服务器加载一个模块。vue 只有在这个组件需要被渲染的时候才会触发该工厂函数,且会把结果缓存起来供未来重渲染.

components: {

'my-component': () => import('./my-async-component')

}

四、webpack的external功能

将项目中需要的一些公共依赖包,并且不常变动的,单独取出,不再每次都打包编译。如vue、vue-router、vuex、axios用cdn中的文件代替,而不是直接打包到vendor中.这样在有缓存的情况下,这些资源均走缓存,不必加载。

在index.html中引入js文件

去掉这些第三方js的import 配置webpack.base.conf.js的externals选项

module.exports = {

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

entry: {

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

},

output: {

path: config.build.assetsroot,

filename: '[name].js',

publicpath: process.env.node_env === 'production'

config.build.assetspublicpath

: config.dev.assetspublicpath

},

externals: {

react:'react',

vue: 'vue',

jquery:'jquery'

},

resolve: {

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

alias: {

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

'@': resolve('src'),

}

},

plugins: [

new webpack.provideplugin({

$: 'jquery',

jquery: 'jquery'

})

],

module: { }

}

五、实现elment-ui和echarts的按需加载

因为之前有篇文章说到了echarts的按需加载。这里只涉及elment-ui的按需加载

安装babel-plugin-component

npm install babel-plugin-component - d

修改.babelrc

{

"presets": [

["env", {

"modules": false

}],

"es2015","stage-2"

],

"plugins": [

"transform-runtime",

[

"component",

{

"libraryname": "element-ui",

"stylelibraryname": "theme-chalk"

}

]

],

在main.js中按需引入

import { menu, menuitem,inputnumber,datepicker,popover,badge,select,option } from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css'