極速快三平臺出租laravel+vue+element-ui 搭建和靜態檔案優化篇
問題出現背景
公司接到一個專案，恩，外包。本來我是不想做，但是因為這個專案是政府單位，所以無奈得做了。然後，專案想要快速成型，於是我選擇使用目前最流行的PHP框架laravel（之前公司都是用自己的框架，很精簡）。
ok,始於laravel。
始於laravel
開啟Laravel的文件，按照官方的quick start開始了一個專案，但是從根目錄發現了package.json。
emmm,這不是nodejs的生態鏈嗎？
於是百度google開始了自己的爬坑之旅。
laravel+vue+element-ui
環境
首先，我們需要構建一個新的vue過程，我簡單的來(前提環境php composer node npm)
composer install
npm install
為了加快速度，一般我們會採用cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
好，想想，我們要用哪幾個元件
vue
vue-router
vue-resource //我並沒有採用 axios 習慣問題
element-ui
全部安裝 cnpm install 上面的包
執行laravel本地服務
php artisan serve
php
新增路由(我這裡使用了一個middleware，如果不用請忽略。)
Route::group(['prefix'=>'admin','middleware'=>'format'] 新建類，程式碼我就省略了
新建檢視
<divid="app">
<admin-component>
</admin-component>
</div>
vue
新建vue元件
<template>
<divid="app">
<el-row>
<el-col:span="24">
這裡是admin
</el-col>
</el-row>
</div>
</template>
<script>exportdefault {
name: "adminIndexComponent",
}
</script>
RouteCompent.vue router的介面
<template>
<divid="app">
<router-view></router-view>
</div>
</template>
新建入口admin.js
import ELE from 'element-ui'
import VueResource from 'vue-resource'
import App from './components/RouteComponent.vue'
import VUE from 'vue'
window.Vue = VUE;
const app = new Vue({
router,
render: h => h(App)
}).$mount('#app');
新建router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Admin from '../components/admin/AdminIndexComponent.vue'
import Home from '../components/CommonComponent.vue'
const routes = [
{
path: '/',
component: Home,
hidden: true
},
{
path: '/',
component: Home,
name: '管理員列表',
iconCls: 'el-icon-d-caret',
hidden: false,
children: [
{ path: '/admin/index', component: Admin, name: '管理員列表' },
{ path: '/admin/index', component: Admin, name: '管理員列表1' }
]
}
];
const router = new Router({ routes });
export default router
關於laravel的crsf問題
Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name=csrf-token]').getAttribute('content');
打包js
首先我們要修改mix的打包結構,根目錄下有webpack.mix.js,如下:
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
我們依葫蘆畫瓢修改成自己想要的
.js('resources/assets/js/admin.js', 'public/js')
.sass('resources/assets/sass/admin.scss', 'public/css/admin.css')
npm run dev
laraver-mix優化
打包完成後，發現包有1.3m。這肯定是不行的，政府的伺服器是自己的老舊機器，我們都懂的。那該如何優化呢？
mix.extarct
我找到官方文件，說，可以將固定的功能單獨打包。
.extract(['vue','vue-router','vue-resource','element-ui'])
這樣打包之後，會產生3個js
js/manifest.js
js/vendor.js
js/admin.js
用mix引入即可 但是又發現vendor.js太大了。這個時候我去看了下原始碼，發現extract可以指定生成的名字，那我覺得應該也是可以分開打包。 於是：
.extract(['element-ui'],'public/js/element-ui.js')
.extract(['vue','vue-router','vue-resource'],'public/js/vue.js')
然而,我發現光element-ui打包出來就有700k，這樣不行啊。繼續尋找其他方式。 官方說laravel-mix是基於webpack的上層封裝，然後我看了element-ui按需引入,再次修改程式碼，只引入我要用的東西
admin.js
import { Submenu,Menu,MenuItemGroup,MenuItem,DropdownMenu,Dropdown,DropdownItem, Button , Input, Select, Dialog, Pagination, Table, TableColumn} from 'element-ui';
Vue.use(VueResource);
Vue.use(Button);
Vue.use(Input);
Vue.use(Select);
Vue.use(Dialog);
Vue.use(Pagination);
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(Dropdown);
Vue.use(DropdownItem);
Vue.use(DropdownMenu);
Vue.use(Menu);
Vue.use(MenuItemGroup);
Vue.use(MenuItem);
Vue.use(Submenu);
這時候，再打包，我發現element-ui還是將整個包完全打好。emmm，為什麼為什麼。
webpack config注入
再回到上面說的(加粗黑體字"laravel-mix是基於webpack的上層封裝")極速快三平臺出租（www.1159880099.com）QQ1159880099，那麼對webpack的修改肯定也會影響到laravel-mix 所以，繼續百度google（element官網說的用blade我嘗試過，laravel-mix沒找到使用他的方式，可能是我太菜把）。
最後在mix找到一個方法，mix.webpackConfig,再找了一個關於element-ui的webpack打包的說明
mix.webpackConfig({
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
"plugins": [["component", [
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk" //原文theme-default 修改成theme-chalk 原文對css的使用css-loader取消
}
]]]
}
},
]
},
});
再次 npm install prod,duangduangduang!!!!
fonts/vendor/_element-ui@2.2.2@element-ui/lib/theme-chalk/element-icons.woff?2fad952a20fbbcfd1bf2ebb210dccf7a 6.16 kB [emitted]
fonts/vendor/_element-ui@2.2.2@element-ui/lib/theme-chalk/element-icons.ttf?6f0a76321d30f3c8120915e57f7bd77e 11 kB [emitted]
/js/admin.js 338 kB 0 [emitted] [big] /js/admin
/js/vue.js 131 kB 1 [emitted] /js/vue
/js/manifest.js 798 bytes 2 [emitted] /js/manifest
/css/admin.css 193 kB 0 [emitted] /js/admin
nginx最後的優化
最後還有一個300kb+的檔案，這時候，再採取我們的nginx進行優化（gzip）,原文
gzip on;
gzip_buffers 32 4k;
gzip_comp_level 6;
gzip_min_length 200;
gzip_types text/css text/xml application/javascript;
最後執行結果:
原來338kb的檔案，現在已經縮成了70kb,完美解決~
後記
關於node-sass報錯解決方案：
cd PROJECT_PATH/node_modules/node-sass/vendor/linux-x64-59(自動產生的版本目錄)
當前目錄會產生一個binding.node
但是好像用npm只會產生一個binding 我猜測直接改名也可以
blog裡說的是用 rebuild node-sass重新編譯 也是可以的。