我要评论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中.这样在有缓存的情况下，这些资源均走缓存，不必加载。
在中引入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'
如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！
网友评论