vue打包优化——vendor体积过大

html-css015

vue打包优化——vendor体积过大,第1张

在vue.config.js文件中的chainWebpack配置插件,默认会在8888端口打开

根据之前打包分析图来看,主要是locale下moment的其他语言包占用体积较大。默认是en的语言包,所以在无需其他语言的情况下,可以直接忽略掉locale下的文件不打包。

解决方案:用webpack自带的IgnorePlugin插件

vue.config.js文件

将引用的外部js、css文件剥离开来,不编译到vendor.js中,而是用资源的形式引用,这样浏览器可以使用多个线程异步将vendor.js、外部的js等加载下来,达到加速首开的目的。

外部的库文件,可以使用CDN资源,或者别的服务器资源等。

cdn引入的地址可以参考官网

https://cn.vuejs.org/v2/guide/installation.html#CDN

也可以像这篇文章是直接在vue.config.js中配置cdn的url地址 vue-cli3打包项目引入外部CDN资源文件

moment的其他语言包没有被打包了,vue等文件也都用的cdn文件,没有被打包进去vendor。

namespace app\assets

use yii\web\AssetBundle

class AppAsset extends AssetBundle {

public $basePath = '@webroot'

public $baseUrl = '@web'

public $css = [

'public/skin/default_skin/css/theme.css',

]

public $js = [

'public/vendor/jquery/jquery-1.11.1.min.js',

'public/vendor/jquery/jquery_ui/jquery-ui.min.js',

'public/js/bootstrap/bootstrap.min.js',

]

//依赖包

public $depends = [

//这里写依赖包即可,没有就别写

]

//导入当前页的功能js文件,注意加载顺序,这个应该最后调用

public static function addPageScript($view, $jsfile) {

$view->registerJsFile($jsfile, [AppAsset::className(), 'depends' =>'app\assets\AppAsset'])

}

//导入编辑器

public static function addCkeditor($view) {

$view->registerJsFile('/public/js/utility/ckeditor/ckeditor.js', [AppAsset::className(), 'depends' =>'app\assets\AppAsset'])

}

}

我只知道在myeclipse中怎么修改,相信会类似。右击你的web工程,选择properties,再选择其中的myeclipse或者eclipse,会看见左边树型结构中有个 web选项,点击,在右边就有修改访问路径了