vue项目打包webpack体积优化

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'