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'
上一篇: ASP类型个人网站与动网整合非官方方法
下一篇: JSP的基本语法解析
推荐阅读
-
vue项目打包上传github并制作预览链接(pages)
-
关于vue-cli 3配置打包优化要点(推荐)
-
vue项目首屏加载时间优化实战
-
Vue项目从webpack3.x升级webpack4不完全指南
-
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
-
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
-
babel7.x和webpack4.x配置vue项目的方法步骤
-
vue项目打包后上传至GitHub并实现github-pages的预览
-
electron-vue利用webpack打包实现多页面的入口文件问题
-
解决cordova+vue 项目打包成APK应用遇到的问题