I have encountered performance issues with Vue.js in my existing code base. Additionally, I noticed a notice in the browser console:
https://i.sstatic.net/KY1B3.png
So, I believe that one simple solution could be to switch Vue into production mode.
Following the recommended link, I attempted to follow the webpack instructions. Our current version of Webpack is 2.7 (while the latest stable version is 4.20). The instructions mention that for Webpack 3 and earlier versions, you need to utilize DefinePlugin:
var webpack = require('webpack')
module.exports = {
// ...
plugins: [
// ...
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
})
]
}
Therefore, I added a build script in my package.json file:
https://i.sstatic.net/J3scx.png
To generate a production build, I execute yarn run build, which triggers a build.js file (paste here) that calls both webpack.base.conf.js (paste here) and webpack.prod.conf.js (paste here).
In these paste files, I implemented the DefinePlugin as per the documentation's suggestion.
I also came across a file named vue-loader.conf.js (paste here), where I included the DefinePlugin as an extra precaution.
Even though I can successfully run yarn run build without any errors, when I serve the site through Apache and check the browser, it still displays a message indicating that we are in development mode.
To confirm whether it is using the files created by webpack, I deleted the folder /public/webpack/ entirely and observed that the web interface failed to load properly without those missing files. I then rebuilt the project to see if it loaded correctly after the process was complete. It does seem to use the files generated by the webpack process, but Vue is not being initialized in production mode.
What could be causing this issue?